使用muse ui製作省市選擇器 ts

2021-10-24 09:37:21 字數 2127 閱讀 8962

一,安裝請參考官網

muse-ui官網

二,使用場景vue構建的移動端h5頁面,並將px轉換為rem

傳送門三,對muse-ui提供的省市選擇器樣式的修改(ts+pug的寫法)

效果圖:

) 取消

div.address 位址

div.

modalok

(@click=

"address_ok"

) 確認

mu-slide-

picker

(:slots=

"addressslots"

,:visible-item-count=

"7",

@change=

"addresschange"

,:values=

"address"

)script

//script


import address from


"@/service/leapaddress"


;private visible: boolean =


false


;private


select_address()


private addressslots =[,


,];private address =


["北京市"


,"北京市"];


private addressprovince =


"北京市"


;private addresscity =


"北京市"


;private


addresschange


(value, index)


this


.address =


[this


.addressprovince,


this


.addresscity];}


private


address_cancel()


private address_select: string ="";


private


address_ok()


elseif(


this


.address[0]


!==this


.address[1])}}
css

.modaldialog


.modalpicker


.address


.modalok}}


}
省市的js

// leapaddress


const address =


;export


default address;
由於typescript不支援直接引入js,所以需要建立.d.ts檔案

// leapaddress.d.ts


declare module "@/service/leapaddress"
備註,由於使用了px轉rem,所以在真機測試時發現省市在滑動時有錯誤的現象,所以我們還需要在vue.config.js中將不需要轉換的第三方元件庫遮蔽

module.exports =


,  assetsdir:


'static/'


,  productionsourcemap:


false


,  css:


,      postcss:)]


},}}


}

資料繫結版省市選擇器

aspx page language c autoeventwireup true codebehind 省市級聯資料繫結.aspx.cs inherits 簡單繫結.省市級聯資料繫結 aspx.cs using system using system.collections.generic usi...

選擇器的使用

定義 使用css將樣式應用於特定的html元素，需要找到這個元素。在css中，執行這一任務的樣式規則部分稱為選擇器 selector 選擇器的介紹 p html h2html 中國佛教em 文化h1 op html id op 這是乙個選擇器的例子p op html class op 海賊王人物介紹...

jQuery選擇器之全選擇器（ 選擇器）

在css中，經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery，如果要獲取文件中所有的元素，通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...