parent
703e127d2c
commit
4b8f7b8cfc
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 www.uviewui.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,86 @@
|
||||
/* #ifndef APP-NVUE */
|
||||
view,
|
||||
text {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* start--演示页面使用的统一样式--start */
|
||||
.u-demo {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.u-demo-wrap {
|
||||
border-width: 1px;
|
||||
border-color: #ddd;
|
||||
border-style: dashed;
|
||||
background-color: rgb(250, 250, 250);
|
||||
padding: 20px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.u-demo-area {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-no-demo-here {
|
||||
color: $u-tips-color;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.u-demo-result-line {
|
||||
border-width: 1px;
|
||||
border-color: #ddd;
|
||||
border-style: dashed;
|
||||
padding: 5px 20px;
|
||||
margin-top: 30px;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(240, 240, 240);
|
||||
color: $u-content-color;
|
||||
font-size: 16px;
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-word;
|
||||
display: inline-block;
|
||||
/* #endif */
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
.u-demo-title,
|
||||
.u-config-title {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.u-config-item {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.u-config-title {
|
||||
margin-top: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.u-item-title {
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
padding-left: 8px;
|
||||
line-height: 1;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.u-item-title:after {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
top: -1px;
|
||||
height: 16px;
|
||||
/* #ifndef APP-NVUE */
|
||||
content: '';
|
||||
/* #endif */
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
background-color: $u-content-color;
|
||||
}
|
||||
/* end--演示页面使用的统一样式--end */
|
||||
@ -0,0 +1,585 @@
|
||||
module.exports = {
|
||||
list: [{
|
||||
"letter": "A",
|
||||
"data": [{
|
||||
"name": "阿拉斯加",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阿拉斯加ABA13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阿克苏",
|
||||
"mobile": "0551-4386721",
|
||||
"keyword": "阿克苏AKESU0551-4386721"
|
||||
},
|
||||
{
|
||||
"name": "阿拉善",
|
||||
"mobile": "4008009100",
|
||||
"keyword": "阿拉善ALASHAN4008009100"
|
||||
},
|
||||
{
|
||||
"name": "阿勒泰",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阿勒泰ALETAI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阿里",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阿里ALI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "安阳",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "13588889999安阳ANYANG"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "B",
|
||||
"data": [{
|
||||
"name": "白城",
|
||||
"mobile": "该主子没有留电话~",
|
||||
"keyword": "白城BAICHENG"
|
||||
},
|
||||
{
|
||||
"name": "白山",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "白山BAISHAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "白银",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "白银BAIYIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "保定",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "保定BAODING13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "C",
|
||||
"data": [{
|
||||
"name": "沧州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "沧州CANGZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "长春",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "长春CHANGCHUN13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "D",
|
||||
"data": [{
|
||||
"name": "大理",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "大理DALI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "大连",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "大连DALIAN13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "E",
|
||||
"data": [{
|
||||
"name": "鄂尔多斯",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "鄂尔多斯EERDUOSI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "恩施",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "恩施ENSHI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "鄂州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "鄂州EZHOU13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "F",
|
||||
"data": [{
|
||||
"name": "防城港",
|
||||
"mobile": "该主子没有留电话~",
|
||||
"keyword": "防城港FANGCHENGGANG"
|
||||
},
|
||||
{
|
||||
"name": "抚顺",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "抚顺FUSHUN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阜新",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阜新FUXIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阜阳",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阜阳FUYANG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "抚州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "抚州FUZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "福州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "福州FUZHOU13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "G",
|
||||
"data": [{
|
||||
"name": "甘南",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "甘南GANNAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "赣州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "赣州GANZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "甘孜",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "甘孜GANZI13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "H",
|
||||
"data": [{
|
||||
"name": "哈尔滨",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "哈尔滨HAERBIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "海北",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "海北HAIBEI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "海东",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "海东HAIDONG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "海口",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "海口HAIKOU13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "I",
|
||||
"data": [{
|
||||
"name": "ice",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "佳木斯JIAMUSI13588889999"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"letter": "J",
|
||||
"data": [{
|
||||
"name": "佳木斯",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "佳木斯JIAMUSI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "吉安",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "吉安JIAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "江门",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "江门JIANGMEN13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "K",
|
||||
"data": [{
|
||||
"name": "开封",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "开封KAIFENG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "喀什",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "喀什KASHI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "克拉玛依",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "克拉玛依KELAMAYI13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "L",
|
||||
"data": [{
|
||||
"name": "来宾",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "来宾LAIBIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "兰州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "兰州LANZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "拉萨",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "拉萨LASA13588889999"
|
||||
},
|
||||
{
|
||||
"name": "乐山",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "乐山LESHAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "凉山",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "凉山LIANGSHAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "连云港",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "连云港LIANYUNGANG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "聊城",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "聊城LIAOCHENG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "辽阳",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "辽阳LIAOYANG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "辽源",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "辽源LIAOYUAN18322223333"
|
||||
},
|
||||
{
|
||||
"name": "丽江",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "丽江LIJIANG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临沧",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临沧LINCANG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临汾",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临汾LINFEN18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临夏",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临夏LINXIA18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临沂",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临沂LINYI18322223333"
|
||||
},
|
||||
{
|
||||
"name": "林芝",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "林芝LINZHI18322223333"
|
||||
},
|
||||
{
|
||||
"name": "丽水",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "丽水LISHUI18322223333"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "M",
|
||||
"data": [{
|
||||
"name": "眉山",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "眉山MEISHAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "梅州",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "梅州MEIZHOU15544448888"
|
||||
},
|
||||
{
|
||||
"name": "绵阳",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "绵阳MIANYANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "牡丹江",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "牡丹江MUDANJIANG15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "N",
|
||||
"data": [{
|
||||
"name": "南昌",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南昌NANCHANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南充",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南充NANCHONG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南京",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南京NANJING15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南宁",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南宁NANNING15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南平",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南平NANPING15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "O",
|
||||
"data": [{
|
||||
"name": "欧阳",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "欧阳ouyang15544448888"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"letter": "P",
|
||||
"data": [{
|
||||
"name": "盘锦",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "盘锦PANJIN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "攀枝花",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "攀枝花PANZHIHUA15544448888"
|
||||
},
|
||||
{
|
||||
"name": "平顶山",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "平顶山PINGDINGSHAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "平凉",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "平凉PINGLIANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "萍乡",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "萍乡PINGXIANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "普洱",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "普洱PUER15544448888"
|
||||
},
|
||||
{
|
||||
"name": "莆田",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "莆田PUTIAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "濮阳",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "濮阳PUYANG15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "Q",
|
||||
"data": [{
|
||||
"name": "黔东南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "黔东南QIANDONGNAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "黔南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "黔南QIANNAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "黔西南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "黔西南QIANXINAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "R",
|
||||
"data": [{
|
||||
"name": "日喀则",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "日喀则RIKAZE15544448888"
|
||||
},
|
||||
{
|
||||
"name": "日照",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "日照RIZHAO15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "S",
|
||||
"data": [{
|
||||
"name": "三门峡",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "三门峡SANMENXIA15544448888"
|
||||
},
|
||||
{
|
||||
"name": "三明",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "三明SANMING15544448888"
|
||||
},
|
||||
{
|
||||
"name": "三沙",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "三沙SANSHA15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "T",
|
||||
"data": [{
|
||||
"name": "塔城",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "塔城TACHENG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "漯河",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "漯河TAHE15544448888"
|
||||
},
|
||||
{
|
||||
"name": "泰安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "泰安TAIAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "W",
|
||||
"data": [{
|
||||
"name": "潍坊",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "潍坊WEIFANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "威海",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "威海WEIHAI15544448888"
|
||||
},
|
||||
{
|
||||
"name": "渭南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "渭南WEINAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "文山",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "文山WENSHAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "X",
|
||||
"data": [{
|
||||
"name": "厦门",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "厦门XIAMEN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "西安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "西安XIAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "湘潭",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "湘潭XIANGTAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "Y",
|
||||
"data": [{
|
||||
"name": "雅安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "雅安YAAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "延安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "延安YANAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "延边",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "延边YANBIAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "盐城",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "盐城YANCHENG15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "Z",
|
||||
"data": [{
|
||||
"name": "枣庄",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "枣庄ZAOZHUANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "张家界",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "张家界ZHANGJIAJIE15544448888"
|
||||
},
|
||||
{
|
||||
"name": "张家口",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "张家口ZHANGJIAKOU15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "#",
|
||||
"data": [{
|
||||
"name": "其他.",
|
||||
"mobile": "16666666666",
|
||||
"keyword": "echo16666666666"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input :value="value" type="select" @click="show = true" :placeholder="placeholder"/>
|
||||
<u-action-sheet :list="dataC" v-model="show" @click="actionSheetCallback"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:[]
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
dataC(){
|
||||
var d = [];
|
||||
this.data.forEach(item => {
|
||||
d.push({
|
||||
text:item
|
||||
})
|
||||
})
|
||||
return d;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
actionSheetCallback(index) {
|
||||
this.$emit("input", this.data[index])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input :value="value" type="select" @click="show = true" :placeholder="placeholder"/>
|
||||
<u-picker mode="region" v-model="show" :area-code='areaCode' @confirm="onConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
areaCode: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
["11", "1101", "110101"]
|
||||
}
|
||||
},
|
||||
valueFor: {
|
||||
type: String,
|
||||
default: "address"
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(params) {
|
||||
let p = params['province'];
|
||||
let c = params['city'];
|
||||
let a = params['area'];
|
||||
if (this.valueFor == 'address') {
|
||||
this.$emit("input", p.label + "," + c.label + "," + a.label);
|
||||
}else if (this.valueFor == 'code') {
|
||||
this.$emit("input", p.value + "," + c.value + "," + a.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-input :value="value" disabled :placeholder="placeholder" @change="selectDate" @click="showDaCalendar = true" />
|
||||
<u-calendar v-model="showDaCalendar" mode="date" max-date="2050-01-01" @change="selectDate"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDaCalendar: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectDate(date) {
|
||||
this.$emit("input", date.result)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input type="select" :value="value" @click="show = true"></u-input>
|
||||
<u-calendar v-model="show" :mode="'range'" @change="change"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(data) {
|
||||
let range = data[0].value + "-" + data[1].value + this.separator + data[2].value + "-" + data[3].value;
|
||||
console.log(range)
|
||||
this.$emit("input", range)
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input type="select" :value="value" @click="show = true"></u-input>
|
||||
<u-select v-model="show" mode="mutil-column" :default-value="defaultValueC" :list="data" @confirm="onConfirm" cancel="onCancel">
|
||||
</u-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultValueC() {
|
||||
let y1i = 0;
|
||||
let m1i = 0;
|
||||
if (this.data.length == 0) {
|
||||
return [y1i, m1i];
|
||||
}
|
||||
|
||||
if (this.defaultValue != null) {
|
||||
y1i = this.getIndex(this.defaultValue[0],this.data[0]);
|
||||
m1i = this.getIndex(this.defaultValue[1],this.data[1]);
|
||||
} else {
|
||||
y1i = this.getIndex(('' + new Date().getFullYear()),this.data[0]);
|
||||
m1i = 0;
|
||||
}
|
||||
return [y1i, m1i];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(data) {
|
||||
let range = data[0].value + "-" + data[1].value;
|
||||
this.$emit("input", range)
|
||||
},
|
||||
onCancel(){
|
||||
|
||||
},
|
||||
getIndex(s,d){
|
||||
let index = 0
|
||||
d.forEach((item,i) => {
|
||||
if(item.value == s){
|
||||
index = i;
|
||||
}
|
||||
})
|
||||
return index;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var yyyy = new Date().getFullYear();
|
||||
let y1 = [{
|
||||
label: ('' + yyyy),
|
||||
value: ('' + yyyy)
|
||||
}];
|
||||
for (let i = 1; i < 50; i++) {
|
||||
y1.splice(0, 0, {
|
||||
label: '' + (yyyy - i),
|
||||
value: '' + (yyyy - i),
|
||||
})
|
||||
y1.push({
|
||||
label: '' + (yyyy + i),
|
||||
value: '' + (yyyy + i),
|
||||
})
|
||||
}
|
||||
|
||||
let m1 = [];
|
||||
for (let i = 1; i < 13; i++) {
|
||||
m1.push({
|
||||
label: i < 10 ? ('0' + i) : i,
|
||||
value: i < 10 ? ('0' + i) : i,
|
||||
})
|
||||
|
||||
}
|
||||
this.data.push(y1);
|
||||
this.data.push(m1);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input type="select" :value="value" @click="show = true" :placeholder="placeholder"></u-input>
|
||||
<u-select v-model="show" mode="mutil-column" :default-value="defaultValueC" :list="data" @confirm="onConfirm">
|
||||
</u-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
separator: {
|
||||
type: String,
|
||||
default: '~'
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultValueC() {
|
||||
let y1i = 0;
|
||||
let m1i = 0;
|
||||
let y2i = 0;
|
||||
let m2i = 0;
|
||||
if (this.data.length == 0) {
|
||||
return [y1i, m1i, y2i, m2i];
|
||||
}
|
||||
|
||||
if (this.defaultValue != null) {
|
||||
y1i = this.getIndex(this.defaultValue[0],this.data[0]);
|
||||
m1i = this.getIndex(this.defaultValue[1],this.data[1]);
|
||||
y2i = this.getIndex(this.defaultValue[2],this.data[2]);
|
||||
m2i = this.getIndex(this.defaultValue[3],this.data[3]);
|
||||
} else {
|
||||
y1i = this.getIndex(('' + new Date().getFullYear()),this.data[0]);
|
||||
m1i = 0;
|
||||
y2i = this.getIndex(('' + new Date().getFullYear()),this.data[2]);
|
||||
m2i = 0;
|
||||
}
|
||||
return [y1i, m1i, y2i, m2i];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(data) {
|
||||
let range = data[0].value + "-" + data[1].value + this.separator + data[2].value + "-" + data[3].value;
|
||||
console.log(range)
|
||||
this.$emit("input", range)
|
||||
},
|
||||
getIndex(s,d){
|
||||
let index = 0
|
||||
d.forEach((item,i) => {
|
||||
if(item.value == s){
|
||||
index = i;
|
||||
}
|
||||
})
|
||||
return index;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var yyyy = new Date().getFullYear();
|
||||
let y1 = [{
|
||||
label: ('' + yyyy),
|
||||
value: ('' + yyyy)
|
||||
}];
|
||||
let y2 = [{
|
||||
label: ('' + yyyy),
|
||||
value: ('' + yyyy)
|
||||
}];
|
||||
for (let i = 1; i < 50; i++) {
|
||||
y1.splice(0, 0, {
|
||||
label: '' + (yyyy - i),
|
||||
value: '' + (yyyy - i),
|
||||
})
|
||||
y1.push({
|
||||
label: '' + (yyyy + i),
|
||||
value: '' + (yyyy + i),
|
||||
})
|
||||
y2.splice(0, 0, {
|
||||
label: '' + (yyyy - i),
|
||||
value: '' + (yyyy - i),
|
||||
})
|
||||
y2.push({
|
||||
label: '' + (yyyy + i),
|
||||
value: '' + (yyyy + i),
|
||||
})
|
||||
}
|
||||
|
||||
let m1 = [];
|
||||
let m2 = [];
|
||||
for (let i = 1; i < 13; i++) {
|
||||
m1.push({
|
||||
label: i < 10 ? ('0' + i) : i,
|
||||
value: i < 10 ? ('0' + i) : i,
|
||||
})
|
||||
m2.push({
|
||||
label: i < 10 ? ('0' + i) : i,
|
||||
value: i < 10 ? ('0' + i) : i,
|
||||
})
|
||||
}
|
||||
this.data.push(y1);
|
||||
this.data.push(m1);
|
||||
this.data.push(y2);
|
||||
this.data.push(m2);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input :value="value" type="select" @click="show = true" :placeholder="placeholder" />
|
||||
<u-select v-model="show" mode="single-column" :list="dataC" @confirm="confirm" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataC() {
|
||||
var d = [];
|
||||
this.data.forEach(item => {
|
||||
d.push({
|
||||
label: item,
|
||||
value: item
|
||||
})
|
||||
})
|
||||
return d;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm(e) {
|
||||
this.$emit("change", this.value, e[0].value)
|
||||
this.$emit("input", e[0].value)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<view style="padding: 10rpx 0;">
|
||||
<view class="card flex v" v-if="!value" @click="sheetShow = true">
|
||||
<u-icon name="plus" color="#838383" size="34"></u-icon>
|
||||
<text>选择文件</text>
|
||||
</view>
|
||||
<view class="card flex v" v-if="value" @click="sheetShow = true">
|
||||
<u-image width="100%" height="300rpx" :src="src">
|
||||
<view slot="error">
|
||||
<u-icon name="file-text" color="#838383" size="34"></u-icon>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
<text v-if="!isUpload && !value && placeholder">{{placeholder}}</text>
|
||||
<view v-if="isUpload">
|
||||
<u-loading mode="circle"></u-loading>
|
||||
<text>上传中</text>
|
||||
</view>
|
||||
|
||||
<u-action-sheet :list="sheetData" v-model="sheetShow" @click="clickSheet"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '../../api/config.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpload: false,
|
||||
sheetShow: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
src() {
|
||||
console.log(config.baseURL + '/filePreview?filePath=' + this.value)
|
||||
return config.baseURL + '/filePreview?filePath=' + this.value;
|
||||
},
|
||||
sheetData() {
|
||||
if (!this.value) {
|
||||
return [{
|
||||
text: '照片'
|
||||
}, {
|
||||
text: '视频'
|
||||
}, {
|
||||
text: '文件'
|
||||
}]
|
||||
} else {
|
||||
return [{
|
||||
text: '照片'
|
||||
}, {
|
||||
text: '视频'
|
||||
}, {
|
||||
text: '文件'
|
||||
}, {
|
||||
text: '删除'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpload(file) { // 一般File对象上传
|
||||
this.isUpload = true;
|
||||
let form = new FormData();
|
||||
form.append("file", file)
|
||||
this.$axios.post('/uploadFiles', form)
|
||||
.then(response => {
|
||||
this.isUpload = false;
|
||||
if (response.code != 0) {
|
||||
this.e("上传失败")
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit("change", response.message, this.value)
|
||||
this.$emit("input", response.message)
|
||||
})
|
||||
.catch(error => {
|
||||
this.isUpload = false;
|
||||
this.e(JSON.stringify(error))
|
||||
});
|
||||
},
|
||||
onUpload2(fileBase64, fileName) {// base64文件上传
|
||||
// alert(fileBase64)
|
||||
this.isUpload = true;
|
||||
let form = new FormData();
|
||||
form.append("fileBase64", fileBase64)
|
||||
form.append("fileName", fileName)
|
||||
this.$axios.post('/uploadFiles', form)
|
||||
.then(response => {
|
||||
// alert(JSON.stringify(response));
|
||||
this.isUpload = false;
|
||||
if (response.code != 0) {
|
||||
this.e("上传失败")
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit("change", response.message, this.value)
|
||||
this.$emit("input", response.message)
|
||||
})
|
||||
.catch(error => {
|
||||
// alert(JSON.stringify(error));
|
||||
this.isUpload = false;
|
||||
this.e(JSON.stringify(error))
|
||||
});
|
||||
},
|
||||
clickSheet(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
if (this.getProp('isInit')) {
|
||||
sc.isExistApi({
|
||||
path: 'chooseImage'
|
||||
},
|
||||
(res) => {
|
||||
sc.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera']
|
||||
},
|
||||
(res) => {
|
||||
if (res.code != 0) {
|
||||
this.e('选择照片出错')
|
||||
return;
|
||||
}
|
||||
this.onUpload2(res.data[0], new Date().getTime() + ".jpg");
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.defaultFileSelect();
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
if (this.getProp('isInit')) {
|
||||
sc.isExistApi({
|
||||
path: 'chooseImage'
|
||||
},
|
||||
(res) => {
|
||||
sc.chooseVideo({
|
||||
compressed: true,
|
||||
maxDuration: 30,
|
||||
sourceType: ['album', 'camera'],
|
||||
camera: 'back'
|
||||
},
|
||||
function(res) {
|
||||
if (res.code != 0) {
|
||||
this.e('选择视频出错')
|
||||
return;
|
||||
}
|
||||
this.onUpload2(res.data.videoData,new Date().getTime() + ".mp4");
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.defaultFileSelect();
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
this.defaultFileSelect();
|
||||
break
|
||||
case 3:
|
||||
this.$emit("change", null, this.value)
|
||||
this.$emit("input", null)
|
||||
break
|
||||
}
|
||||
},
|
||||
defaultFileSelect() {
|
||||
var input = document.createElement('input');
|
||||
input.style.display = 'none';
|
||||
input.type = "file";
|
||||
document.body.appendChild(input);
|
||||
input.dispatchEvent(new MouseEvent('click'));
|
||||
input.onchange = function (ev) {
|
||||
this.onUpload(ev.target.files[0])
|
||||
document.body.removeChild(input);
|
||||
}.bind(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.card {
|
||||
overflow: hidden;
|
||||
background: #eee;
|
||||
border-radius: 6px;
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-input type="select" :value="value" @click="show = true"></u-input>
|
||||
<u-select v-model="show" mode="mutil-column" :default-value="defaultValueC" :list="data" @confirm="onConfirm" cancel="onCancel">
|
||||
</u-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultValueC() {
|
||||
let y1i = 0;
|
||||
if (this.data.length == 0) {
|
||||
return [y1i];
|
||||
}
|
||||
|
||||
if (this.defaultValue != null) {
|
||||
y1i = this.getIndex(this.defaultValue[0],this.data[0]);
|
||||
} else {
|
||||
y1i = this.getIndex(('' + new Date().getFullYear()),this.data[0]);
|
||||
}
|
||||
return [y1i];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(data) {
|
||||
this.$emit("input", data[0].value)
|
||||
},
|
||||
onCancel(){
|
||||
|
||||
},
|
||||
getIndex(s,d){
|
||||
let index = 0
|
||||
d.forEach((item,i) => {
|
||||
if(item.value == s){
|
||||
index = i;
|
||||
}
|
||||
})
|
||||
return index;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var yyyy = new Date().getFullYear();
|
||||
let y1 = [{
|
||||
label: ('' + yyyy),
|
||||
value: ('' + yyyy)
|
||||
}];
|
||||
for (let i = 1; i < 50; i++) {
|
||||
y1.splice(0, 0, {
|
||||
label: '' + (yyyy - i),
|
||||
value: '' + (yyyy - i),
|
||||
})
|
||||
y1.push({
|
||||
label: '' + (yyyy + i),
|
||||
value: '' + (yyyy + i),
|
||||
})
|
||||
}
|
||||
|
||||
this.data.push(y1);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<u-radio-group :value="cvalue" @change="onChange">
|
||||
<u-radio key="1" :name="1">{{labelYes}}
|
||||
</u-radio>
|
||||
<u-radio key="2" :name="2">{{labelNo}}
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean | String | Number,
|
||||
default: null
|
||||
},
|
||||
valueYes: {
|
||||
type: Boolean | String | Number,
|
||||
default: true
|
||||
},
|
||||
valueNo: {
|
||||
type: Boolean | String | Number,
|
||||
default: false
|
||||
},
|
||||
labelYes: {
|
||||
type: String,
|
||||
default: '是'
|
||||
},
|
||||
labelNo: {
|
||||
type: String,
|
||||
default: '否'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cvalue() {
|
||||
if (this.value == this.valueYes) {
|
||||
return 1;
|
||||
} else if (this.value == this.valueNo) {
|
||||
|
||||
return 2;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(value) {
|
||||
if (value == 1) {
|
||||
this.$emit("input", this.valueYes)
|
||||
} else if (value == 2) {
|
||||
this.$emit("input", this.valueNo)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<script>
|
||||
import './index.css'
|
||||
export default {
|
||||
// #ifdef H5
|
||||
onLaunch: function() {
|
||||
this.show()
|
||||
this.$router.beforeEach((to, from, next) => {
|
||||
this.hide(next)
|
||||
})
|
||||
this.$router.afterEach(() => {
|
||||
setTimeout(this.show, 50)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
hide(callback) {
|
||||
const classList = document.querySelector('uni-page').classList
|
||||
classList.add('animation-before', 'animation-leave')
|
||||
classList.remove('animation-show')
|
||||
setTimeout(() => {
|
||||
classList.remove('animation-before', 'animation-leave')
|
||||
callback && callback()
|
||||
}, 300)
|
||||
},
|
||||
show() {
|
||||
const classList = document.querySelector('uni-page').classList
|
||||
classList.add('animation-before')
|
||||
setTimeout(() => {
|
||||
classList.add('animation-enter', 'animation-after', 'animation-show')
|
||||
setTimeout(() => {
|
||||
classList.remove('animation-before', 'animation-after', 'animation-enter')
|
||||
}, 300)
|
||||
}, 20)
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="nav-wrap">
|
||||
<view class="nav-title">
|
||||
<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image>
|
||||
<view class="nav-info">
|
||||
<view class="nav-title__text">
|
||||
{{$t('common.title')}}
|
||||
</view>
|
||||
<view class="nav-slogan">
|
||||
{{$t('common.intro')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-desc">
|
||||
{{desc}}
|
||||
</view>
|
||||
<view class="lang" @tap="switchLang">
|
||||
<u-icon size="46" color="warning" :name="lang"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
desc: String,
|
||||
title: String,
|
||||
},
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$i18n.locale == 'zh' ? 'zh' : 'en';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchLang() {
|
||||
this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh' : 'en';
|
||||
this.vuex_tabbar[0].text = this.$t('nav.components')
|
||||
this.vuex_tabbar[1].text = this.$t('nav.js')
|
||||
this.vuex_tabbar[2].text = this.$t('nav.template')
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t(this.title)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-wrap {
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lang {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-info {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav-title__text {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
color: $u-main-color;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 70px;
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.nav-slogan {
|
||||
color: $u-tips-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-desc {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: $u-content-color;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "uView",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"vue-i18n": {
|
||||
"version": "8.20.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.20.0.tgz",
|
||||
"integrity": "sha512-ZiAOoeR4d/JtKpbjipx3I80ey7cYG1ki5gQ7HwzWm4YFio9brA15BEYHjalEoBaEfzF5OBEZP+Y2MvAaWnyXXg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "uView",
|
||||
"version": "1.0.0",
|
||||
"description": "<p align=\"center\">\r <img alt=\"logo\" src=\"https://uviewui.com/common/logo.png\" width=\"120\" height=\"120\" style=\"margin-bottom: 10px;\">\r </p>\r <h3 align=\"center\" style=\"margin: 30px 0 30px;font-weight: bold;font-size:40px;\">uView</h3>\r <h3 align=\"center\">多平台快速开发的UI框架</h3>",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/YanxinNet/uView.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/YanxinNet/uView/issues"
|
||||
},
|
||||
"homepage": "https://github.com/YanxinNet/uView#readme",
|
||||
"dependencies": {
|
||||
"vue-i18n": "^8.20.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-avatar
|
||||
:mode="mode"
|
||||
:size="size"
|
||||
:src="src"
|
||||
:text="text"
|
||||
:showLevel="showLevel"
|
||||
:showSex="showSex"
|
||||
:sexIcon="sexIcon"
|
||||
:bgColor='bgColor'
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式选择</view>
|
||||
<u-subsection :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">性别选择</view>
|
||||
<u-subsection :list="['男', '女', '不显示']" @change="sexChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">等级</view>
|
||||
<u-subsection :list="['显示', '不显示']" @change="levelChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义内容</view>
|
||||
<u-subsection current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">尺寸</view>
|
||||
<u-subsection current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mode: 'circle',
|
||||
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||
text: '', // 优先级比src高
|
||||
size: '90',
|
||||
showLevel: true,
|
||||
showSex: true,
|
||||
sexIcon: 'man',
|
||||
bgColor: '#fcbd71'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'circle' : 'square';
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.text = '';
|
||||
this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg';
|
||||
} else {
|
||||
this.text = '无头像';
|
||||
}
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160;
|
||||
},
|
||||
sexChange(index) {
|
||||
this.showSex = true;
|
||||
if(index == 0) this.sexIcon = 'man';
|
||||
if(index == 1) this.sexIcon = 'woman';
|
||||
if(index == 2) this.showSex = false;
|
||||
},
|
||||
levelChange(index) {
|
||||
this.showLevel = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<view class="u-no-demo-here">滚动页面即可在右下角看到返回顶部的按钮</view>
|
||||
</view>
|
||||
<u-back-top :scrollTop="scrollTop" :mode="mode"
|
||||
:bottom="bottom" :right="right" :top="top" :icon="icon" :custom-style="customStyle"
|
||||
:icon-style="iconStyle" :tips="tips"
|
||||
>
|
||||
</u-back-top>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式</view>
|
||||
<u-subsection :list="['圆形', '方形']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">组件位置</view>
|
||||
<u-subsection :list="['默认', '自定义']" @change="positionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示组件的滚动条距离</view>
|
||||
<u-subsection current="1" :list="['200', '400', '600']" @change="scrollTopChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
mode: 'circle',
|
||||
bottom: 200,
|
||||
right: 40,
|
||||
top: 400,
|
||||
icon: 'arrow-upward',
|
||||
iconStyle: {
|
||||
color: '#909399',
|
||||
fontSize: '38rpx'
|
||||
},
|
||||
customStyle: {},
|
||||
tips: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = !index ? 'circle' : 'square';
|
||||
},
|
||||
positionChange(index) {
|
||||
if(index == 0) {
|
||||
this.bottom = 200;
|
||||
this.right = 40;
|
||||
} else {
|
||||
this.bottom = 400;
|
||||
this.right = 80;
|
||||
}
|
||||
},
|
||||
scrollTopChange(index) {
|
||||
this.top = [200, 400, 600][index];
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.icon = 'arrow-up';
|
||||
this.iconStyle = {
|
||||
color: '#2979ff',
|
||||
fontSize: '34rpx'
|
||||
};
|
||||
this.customStyle = {
|
||||
backgroundColor: '#a0cfff',
|
||||
color: '#2979ff'
|
||||
};
|
||||
this.tips = '顶部';
|
||||
} else {
|
||||
this.icon = 'arrow-upward';
|
||||
this.iconStyle = {
|
||||
color: '#909399',
|
||||
fontSize: '38rpx'
|
||||
};
|
||||
this.customStyle = {};
|
||||
this.tips = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {
|
||||
height: 200vh;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode"
|
||||
:start-text="startText" :end-text="endText" :range-color="rangeColor"
|
||||
:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor" :btn-type="btnType"
|
||||
>
|
||||
</u-calendar>
|
||||
<view class="u-demo-result-line">
|
||||
{{result}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式</view>
|
||||
<u-subsection current="1" :list="['单个日期', '日期范围']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mode: 'range',
|
||||
result: "请选择日期",
|
||||
startText: '开始',
|
||||
endText: '结束',
|
||||
rangeColor: '#2979ff',
|
||||
rangeBgColor: 'rgba(41,121,255,0.13)',
|
||||
activeBgColor: '#2979ff',
|
||||
btnType: 'primary',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showBtnStatus() {
|
||||
return this.show ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showChange(index) {
|
||||
this.show = !index;
|
||||
},
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'date' : 'range';
|
||||
this.show = true;
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.startText = '住店';
|
||||
this.endText = '离店';
|
||||
this.activeBgColor = '#19be6b';
|
||||
this.rangeColor = '#19be6b';
|
||||
this.rangeBgColor = 'rgba(25,190,107, 0.13)';
|
||||
this.btnType = 'success';
|
||||
} else {
|
||||
this.startText = '开始';
|
||||
this.endText = '结束';
|
||||
this.activeBgColor = '#2979ff';
|
||||
this.rangeColor = '#2979ff';
|
||||
this.rangeBgColor = 'rgba(41,121,255,0.13)';
|
||||
this.btnType = 'primary';
|
||||
}
|
||||
this.show = true;
|
||||
},
|
||||
customChange(index) {
|
||||
if(index == 0) {
|
||||
this.icon1 = 'map';
|
||||
this.icon2 = 'photo';
|
||||
this.arrow = true;
|
||||
} else {
|
||||
this.icon1 = '';
|
||||
this.icon2 = '';
|
||||
this.arrow = false;
|
||||
}
|
||||
},
|
||||
textareaChange(index) {
|
||||
this.type = index == 0 ? 'textarea' : 'text';
|
||||
},
|
||||
change(e) {
|
||||
if (this.mode == 'range') {
|
||||
this.result = e.startDate + " - " + e.endDate;
|
||||
} else {
|
||||
this.result = e.result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-empty :mode="mode">
|
||||
<u-button v-if="slot" slot="bottom" size="medium">
|
||||
slot按钮
|
||||
</u-button>
|
||||
</u-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式选择</view>
|
||||
<u-table>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('car')">购物车为空</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('page')">页面不存在</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('search')">没有搜索结果</u-button>
|
||||
</u-td>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('address')">没有收货地址</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('wifi')">没有WiFi</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('order')">订单为空</u-button>
|
||||
</u-td>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('coupon')">没有优惠券</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('favor')">没有收藏</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('permission')">无权限</u-button>
|
||||
</u-td>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('history')">无历史记录</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('news')">无新闻列表</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('message')">消息列表为空</u-button>
|
||||
</u-td>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('list')">列表为空</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
<u-button :hair-line="false" size="mini" @click="modeChange('data')">数据为空</u-button>
|
||||
</u-td>
|
||||
<u-td class="u-td">
|
||||
待扩展
|
||||
</u-td>
|
||||
</u-tr>
|
||||
</u-table>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">传入slot</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mode: 'data',
|
||||
slot: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(mode = 'data') {
|
||||
this.mode = mode;
|
||||
},
|
||||
slotChange(index) {
|
||||
this.slot = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo-area {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-demo-area .u-empty {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-field
|
||||
v-model="mobile"
|
||||
label="手机号"
|
||||
:error-message="errorMessage"
|
||||
placeholder="请填写手机号"
|
||||
:required="required"
|
||||
:icon="icon1"
|
||||
:type="type"
|
||||
>
|
||||
</u-field>
|
||||
<u-field
|
||||
v-model="code"
|
||||
label="验证码"
|
||||
placeholder="请填写验证码"
|
||||
:required="required"
|
||||
:icon="icon2"
|
||||
>
|
||||
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
|
||||
</u-field>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">右侧按钮</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示错误信息</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否必填</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示左图标和右箭头</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">第一个输入框为textarea类型</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
code: '',
|
||||
errorMessage: '',
|
||||
required: false,
|
||||
placeholderColor: this.$u.color['tipsColor'],
|
||||
arrow: false,
|
||||
showBtn: false,
|
||||
icon1: '',
|
||||
icon2: '',
|
||||
type: 'text',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showBtnChange(index) {
|
||||
this.showBtn = index == 0 ? true : false;
|
||||
},
|
||||
errorMessageChange(index) {
|
||||
this.errorMessage = index == 0 ? '手机号有误' : false
|
||||
},
|
||||
requiredChange(index) {
|
||||
this.required = index == 0 ? true : false;
|
||||
},
|
||||
customChange(index) {
|
||||
if(index == 0) {
|
||||
this.icon1 = 'map';
|
||||
this.icon2 = 'photo';
|
||||
this.arrow = true;
|
||||
} else {
|
||||
this.icon1 = '';
|
||||
this.icon2 = '';
|
||||
this.arrow = false;
|
||||
}
|
||||
},
|
||||
textareaChange(index) {
|
||||
this.type = index == 0 ? 'textarea' : 'text';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<u-index-list :scrollTop="scrollTop" :index-list="indexList">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<u-index-anchor :index="item.letter" />
|
||||
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</u-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexList from "@/common/index.list.js";
|
||||
const letterArr = indexList.list.map(val => {
|
||||
return val.letter;
|
||||
})
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
indexList: letterArr,
|
||||
list: indexList.list
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-cell {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px 24rpx;
|
||||
overflow: hidden;
|
||||
color: $u-content-color;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<view class="input-wrap">
|
||||
<input class="input" disabled type="text" :value="input" placeholder="来自键盘的输入内容" />
|
||||
<u-button :custom-style="{height: '32px'}" :hairLine="false" class="clear-btn" @tap="input = ''">清空</u-button>
|
||||
</view>
|
||||
<u-keyboard :mask="mask" ref="uKeyboard" safe-area-inset-bottom @confirm="confirm"
|
||||
:random="random" :dotEnable="false" :mode="mode"
|
||||
:confirmBtn="true" :cancelBtn="true" :tooltip="tooltip" v-model="show"
|
||||
@change="change" @backspace="backspace"></u-keyboard>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">键盘开关</view>
|
||||
<u-subsection :current="show == true ? 0 : 1" :list="['开', '关']" @change="statusChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">键盘类型</view>
|
||||
<u-subsection :list="['数字键盘', '身份证键盘', '车牌号键盘']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">打乱顺序</view>
|
||||
<u-subsection :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">上方工具条</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否显示遮罩</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
input: '',
|
||||
mode: 'number',
|
||||
random: false,
|
||||
tooltip: true,
|
||||
mask: true,
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusChange(index) {
|
||||
this.show = index == 0 ? true : false;
|
||||
},
|
||||
modeChange(index) {
|
||||
if(index == 0) this.mode = 'number';
|
||||
if(index == 1) this.mode = 'card';
|
||||
if(index == 2) this.mode = 'car';
|
||||
this.show = true;
|
||||
},
|
||||
randomChange(index) {
|
||||
this.random = index == 0 ? true : false;
|
||||
this.show = true;
|
||||
},
|
||||
tooltipChange(index) {
|
||||
this.tooltip = index == 0 ? true : false;
|
||||
this.show = true;
|
||||
},
|
||||
maskChange(index) {
|
||||
this.show = true;
|
||||
this.mask = !index;
|
||||
},
|
||||
// 点击退格键
|
||||
backspace() {
|
||||
if(this.input.length) this.input = this.input.substr(0, this.input.length - 1);
|
||||
},
|
||||
// 键盘按键发生变化
|
||||
change(detail) {
|
||||
this.input += detail;
|
||||
},
|
||||
confirm(e) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input {
|
||||
border: 1px solid $u-light-color;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
height: 32px;
|
||||
font-size: 26rpx;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
margin-left: 10px;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
|
||||
<u-modal ref="uModal" v-model="show" :show-cancel-button="true"
|
||||
:show-title="showTitle" :async-close="asyncClose"
|
||||
@confirm="confirm" :content="content"
|
||||
>
|
||||
<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
|
||||
<view class="warp" style="margin: 30rpx;" v-if="contentSlot">
|
||||
<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</u-modal>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否显示标题</view>
|
||||
<u-subsection current="0" :list="['是', '否']" @change="titleChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义内容</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">异步关闭</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="asyncChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
zoom: false,
|
||||
content: '慈母手中线，游子身上衣',
|
||||
contentSlot: false,
|
||||
showTitle: true,
|
||||
asyncClose: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.show ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showChange(index) {
|
||||
this.show = !index;
|
||||
},
|
||||
titleChange(index) {
|
||||
this.showTitle = !index;
|
||||
this.show = true;
|
||||
},
|
||||
contentChange(index) {
|
||||
this.contentSlot = !index;
|
||||
this.show = true;
|
||||
},
|
||||
asyncChange(index) {
|
||||
this.show = true;
|
||||
this.asyncClose = !index;
|
||||
},
|
||||
confirm() {
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logo {
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list"
|
||||
@change="change" :current="current" :is-scroll="isScroll" :offset="offset"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式选择</view>
|
||||
<u-subsection :current="sectionCurrent" :list="['滚动', '非滚动']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">标签个数(非滚动模式)</view>
|
||||
<u-subsection :list="['2', '3', '4']" @change="countChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">活动选项字颜色</view>
|
||||
<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">字体加粗</view>
|
||||
<u-subsection mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
data: [{
|
||||
name: '关注',
|
||||
count: 100
|
||||
}, {
|
||||
name: '推荐',
|
||||
count: 7
|
||||
}, {
|
||||
name: '电影'
|
||||
},{
|
||||
name: '电视剧'
|
||||
},{
|
||||
name: '小视频'
|
||||
}, {
|
||||
name: '游戏'
|
||||
}, {
|
||||
name: '校园'
|
||||
},{
|
||||
name: '影视'
|
||||
},{
|
||||
name: '音乐'
|
||||
}],
|
||||
current: 0,
|
||||
sectionCurrent: 0,
|
||||
isScroll: true,
|
||||
tabCountIndex: 0,
|
||||
activeColor: this.$u.color['primary'],
|
||||
bold: true,
|
||||
control: true,
|
||||
offset: [5, -5]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.list = this.data;
|
||||
},
|
||||
methods: {
|
||||
countChange(index) {
|
||||
this.sectionCurrent = 1;
|
||||
if(index == 0) {
|
||||
this.list = [];
|
||||
this.list.push(this.data[0]);
|
||||
this.list.push(this.data[1]);
|
||||
this.offset = [5, 60]
|
||||
} else if(index == 1) {
|
||||
this.list = [];
|
||||
this.list.push(this.data[0]);
|
||||
this.list.push(this.data[1]);
|
||||
this.list.push(this.data[2]);
|
||||
this.offset = [5, 20]
|
||||
} else {
|
||||
this.list = [];
|
||||
this.list.push(this.data[0]);
|
||||
this.list.push(this.data[1]);
|
||||
this.list.push(this.data[2]);
|
||||
this.list.push(this.data[3]);
|
||||
this.offset = [5, 5]
|
||||
}
|
||||
this.tabCountIndex = index;
|
||||
this.isScroll = false;
|
||||
},
|
||||
change(index) {
|
||||
this.current = index;
|
||||
},
|
||||
modeChange(index) {
|
||||
this.control = false;
|
||||
this.current = 0;
|
||||
if(index == 0) {
|
||||
this.isScroll = true;
|
||||
this.list = this.data;
|
||||
this.offset = [5, -5]
|
||||
} else {
|
||||
this.isScroll = false;
|
||||
this.countChange(this.tabCountIndex);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.control = true;
|
||||
})
|
||||
},
|
||||
colorChange(e) {
|
||||
let color = 'primary';
|
||||
switch(e) {
|
||||
case 0:
|
||||
color = 'primary';break;
|
||||
case 1:
|
||||
color = 'success';break;
|
||||
case 2:
|
||||
color = 'error';break;
|
||||
case 3:
|
||||
color = 'warning';break;
|
||||
}
|
||||
this.activeColor = this.$u.color[color];
|
||||
},
|
||||
boldChange(e) {
|
||||
switch(e) {
|
||||
case 0:
|
||||
this.bold = true;break;
|
||||
case 1:
|
||||
this.bold = false;break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-config-wrap {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" @close="close" @click="click" :show="show" :size="size" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式选择</view>
|
||||
<u-subsection :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示内容</view>
|
||||
<u-subsection :list="['蒹葭苍苍', '白露为霜', '在水一方']" @change="textChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主题选择</view>
|
||||
<u-subsection current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">形状</view>
|
||||
<u-subsection :list="['square', 'circle', 'circleLeft', 'circleRight']" @change="shapeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">尺寸</view>
|
||||
<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">关闭图标</view>
|
||||
<u-subsection :list="['是', '否']" @change="closeableChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: '蒹葭苍苍',
|
||||
mode: 'light',
|
||||
type: 'error',
|
||||
size: 'default',
|
||||
shape: 'square',
|
||||
closeable: true,
|
||||
show: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'light' : index == 1 ? 'dark' : 'plain';
|
||||
},
|
||||
textChange(index) {
|
||||
this.text = index == 0 ? '蒹葭苍苍' : index == 1 ? '白露为霜' : '在水一方';
|
||||
},
|
||||
typeChange(index) {
|
||||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
|
||||
},
|
||||
shapeChange(index) {
|
||||
this.shape = index == 0 ? 'square' : index == 1 ? 'circle' : index == 2 ? 'circleLeft' : 'circleRight';
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? 'default' : 'mini';
|
||||
},
|
||||
closeableChange(index) {
|
||||
this.closeable = index == 0 ? true : false;
|
||||
},
|
||||
click(index) {
|
||||
this.$refs.uToast.show({
|
||||
title: `第${index + 1}个标签被点击`,
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
close(index) {
|
||||
this.$refs.uToast.show({
|
||||
title: `关闭图标被点击`,
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<u-form
|
||||
:model="form"
|
||||
ref="uForm"
|
||||
>
|
||||
<u-form-item label="姓名">
|
||||
<u-input v-model="form.name" />
|
||||
</u-form-item>
|
||||
<u-form-item label="简介">
|
||||
<u-input v-model="form.intro" />
|
||||
</u-form-item>
|
||||
<u-form-item label="性别">
|
||||
<u-input
|
||||
v-model="form.sex"
|
||||
type="select"
|
||||
/>
|
||||
</u-form-item>
|
||||
<u-form-item label="水果">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox
|
||||
v-model="item.checked"
|
||||
v-for="(item, index) in checkboxList"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
>
|
||||
{{ item.name }}
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</u-form-item>
|
||||
<u-form-item label="味道">
|
||||
<u-radio-group v-model="radio">
|
||||
<u-radio
|
||||
v-for="(item, index) in radioList"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
{{ item.name }}
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</u-form-item>
|
||||
<u-form-item label="开关">
|
||||
<u-switch
|
||||
slot="right"
|
||||
v-model="switchVal"
|
||||
></u-switch>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
intro: '',
|
||||
sex: ''
|
||||
},
|
||||
checkboxList: [{
|
||||
name: '苹果',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '雪梨',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '柠檬',
|
||||
checked: false,
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
radioList: [{
|
||||
name: '鲜甜',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '麻辣',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
radio: '',
|
||||
switchVal: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast :type="type" ref="uToast"></u-toast>
|
||||
<text class="no-mode-here">见弹出toast</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主题</view>
|
||||
<u-subsection :current="4" :list="['primary', 'success', 'error', 'warning', 'default']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">结束后自动跳转</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="urlChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">位置</view>
|
||||
<u-subsection current="1" :list="['顶部', '中部', '底部']" @change="positionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示图标</view>
|
||||
<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 'success',
|
||||
title: '桃花潭水深千尺',
|
||||
icon: true,
|
||||
position: 'center',
|
||||
url: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeChange(index) {
|
||||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'default';
|
||||
this.show();
|
||||
},
|
||||
positionChange(index) {
|
||||
this.position = index == 0 ? 'top' : index == 1 ? 'center' : 'bottom';
|
||||
this.show();
|
||||
},
|
||||
iconChange(index) {
|
||||
this.icon = index == 0 ? true : false;
|
||||
this.show();
|
||||
},
|
||||
urlChange(index) {
|
||||
this.url = index == 0 ? '/pages/components/button/index' : '';
|
||||
this.show();
|
||||
},
|
||||
show() {
|
||||
this.$refs.uToast.show({
|
||||
title: this.title,
|
||||
position: this.position,
|
||||
type: this.type,
|
||||
icon: this.icon,
|
||||
url: this.url,
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
this.$refs.uToast.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-mode-here {
|
||||
color: $u-tips-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-top-tips ref="uTips"></u-top-tips>
|
||||
<text class="u-no-demo-here">点击参数配置查看效果</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主题选择</view>
|
||||
<u-subsection :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示时间</view>
|
||||
<u-subsection current="1" :list="['长', '正常', '短']" @change="durationChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
duration: 2000,
|
||||
title: '忽如一夜春风来，千树万树梨花开',
|
||||
type: 'primary'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTips() {
|
||||
this.$refs.uTips.show({
|
||||
duration: this.duration,
|
||||
title: this.title,
|
||||
type: this.type
|
||||
});
|
||||
},
|
||||
typeChange(index) {
|
||||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
|
||||
this.showTips();
|
||||
},
|
||||
durationChange(index) {
|
||||
this.duration = index == 0 ? 4000 : index == 1 ? 2000 : 500;
|
||||
this.showTips();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-m-p-50">
|
||||
<view class="u-demo-area u-flex u-row-center">
|
||||
<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom">
|
||||
<u-dropdown-item @change="change" v-model="value1" title="距离" :options="options1"></u-dropdown-item>
|
||||
<u-dropdown-item @change="change" v-model="value2" title="温度" :options="options2"></u-dropdown-item>
|
||||
<u-dropdown-item title="属性">
|
||||
<view class="slot-content">
|
||||
<view class="item-box">
|
||||
<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
<u-button type="primary" @click="closeDropdown">确定</u-button>
|
||||
</view>
|
||||
</u-dropdown-item>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">下边框</view>
|
||||
<u-subsection current="1" :list="['有', '无']" @change="borderChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">激活颜色</view>
|
||||
<u-subsection :list="['#2979ff', '#ff9900', '#19be6b']" @change="activeColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">遮罩是否可点击</view>
|
||||
<u-subsection :list="['是', '否']" @change="maskChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '2',
|
||||
mask: true,
|
||||
options1: [{
|
||||
label: '默认排序',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '距离优先',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '价格优先',
|
||||
value: 3,
|
||||
}
|
||||
],
|
||||
options2: [{
|
||||
label: '去冰',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '加冰',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '正常温',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '加热',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: '极寒风暴',
|
||||
value: 5,
|
||||
}
|
||||
],
|
||||
list: [{
|
||||
label: '琪花瑶草',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
label: '清词丽句',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '宛转蛾眉',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '煦色韶光',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '鱼沉雁落',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '章台杨柳',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '霞光万道',
|
||||
active: false,
|
||||
}
|
||||
],
|
||||
borderBottom: false,
|
||||
activeColor: '#2979ff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
borderChange(index) {
|
||||
this.borderBottom = !index;
|
||||
},
|
||||
activeColorChange(index) {
|
||||
this.activeColor = ['#2979ff', '#ff9900', '#19be6b'][index];
|
||||
},
|
||||
change(index) {
|
||||
this.$u.toast(`点击了第${index}项`);
|
||||
},
|
||||
closeDropdown() {
|
||||
this.$refs.uDropdown.close();
|
||||
},
|
||||
tagClick(index) {
|
||||
this.list[index].active = !this.list[index].active;
|
||||
},
|
||||
maskChange(index) {
|
||||
this.mask = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-config-wrap {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.slot-content {
|
||||
background-color: #FFFFFF;
|
||||
padding: 24rpx;
|
||||
|
||||
.item-box {
|
||||
margin-bottom: 50rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
border: 1px solid $u-type-primary;
|
||||
color: $u-type-primary;
|
||||
padding: 8rpx 40rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #FFFFFF;
|
||||
background-color: $u-type-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast :type="type" ref="uToast"></u-toast>
|
||||
<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore"
|
||||
:mode="mode" @end="end" @close="close" @click="click" :show="show" :type="type" :list="list"
|
||||
:moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration" :isCircular="isCircular"></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主题</view>
|
||||
<u-subsection :current="3" :list="['primary', 'success', 'error', 'warning', 'none']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">滚动模式</view>
|
||||
<u-subsection :current="current" :list="['水平', '垂直']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否衔接(水平模式有效)</view>
|
||||
<u-subsection :list="['是', '否']" @change="isCircularChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :list="['播放', '暂停']" @change="playStateChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">速度</view>
|
||||
<u-subsection :current="1" :list="['慢', '正常', '快']" @change="speedChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">图标</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="iconChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
autoplay: false,
|
||||
type: 'warning',
|
||||
list: [
|
||||
'锦瑟无端五十弦，一弦一柱思华年',
|
||||
'庄生晓梦迷蝴蝶，望帝春心托杜鹃',
|
||||
'沧海月明珠有泪，蓝田日暖玉生烟'
|
||||
],
|
||||
mode: 'horizontal',
|
||||
playState: 'play',
|
||||
speed: 160,
|
||||
duration: 2000,
|
||||
moreIcon: true,
|
||||
volumeIcon: true,
|
||||
isCircular: true,
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
typeChange(index) {
|
||||
let type = ['primary', 'success', 'error', 'warning', 'none'];
|
||||
this.type = type[index];
|
||||
},
|
||||
modeChange(index) {
|
||||
this.current = index;
|
||||
this.mode = index == 0 ? 'horizontal' : 'vertical';
|
||||
},
|
||||
playStateChange(index) {
|
||||
this.playState = index == 0 ? 'play' : 'paused';
|
||||
},
|
||||
speedChange(index) {
|
||||
if(index == 0) {
|
||||
this.$nextTick(() => {
|
||||
this.speed = 50;
|
||||
this.duration = 6000;
|
||||
})
|
||||
} else if(index == 1) {
|
||||
this.$nextTick(() => {
|
||||
this.speed = 160;
|
||||
this.duration = 2000;
|
||||
})
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.speed = 350;
|
||||
this.duration = 400;
|
||||
})
|
||||
}
|
||||
},
|
||||
iconChange(index) {
|
||||
if(index == 0) {
|
||||
this.moreIcon = true;
|
||||
this.volumeIcon = true;
|
||||
} else {
|
||||
this.moreIcon = false;
|
||||
this.volumeIcon = false;
|
||||
}
|
||||
},
|
||||
isCircularChange(index) {
|
||||
this.isCircular = index == 0 ? true : false;
|
||||
this.current = 0;
|
||||
this.mode = 'horizontal';
|
||||
},
|
||||
close() {
|
||||
this.toast(`点击了关闭图标`);
|
||||
},
|
||||
click(index) {
|
||||
if(this.mode == 'horizontal' && this.isCircular) {
|
||||
this.toast('此模式无法获取Index值');
|
||||
} else {
|
||||
this.toast(`点击了第${index + 1}条消息`);
|
||||
}
|
||||
|
||||
},
|
||||
getMore() {
|
||||
this.toast(`点击了更多图标`);
|
||||
},
|
||||
toast(title) {
|
||||
this.$refs.uToast.show({
|
||||
title: title,
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
end() {
|
||||
// console.log('end');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<view class="u-demo-result-line">{{ input ? input : 'Picker值' }}</view>
|
||||
<u-picker
|
||||
:mode="mode"
|
||||
:defaultTime="defaultTime"
|
||||
v-model="show"
|
||||
:defaultRegion="defaultRegion"
|
||||
:params="params"
|
||||
end-year="2030"
|
||||
@confirm="confirm"
|
||||
:defaultSelector="defaultSelector"
|
||||
:range="range"
|
||||
:range-key="rangKey"
|
||||
@columnchange="columnchange"
|
||||
></u-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">Picker开关</view>
|
||||
<u-subsection :current="status" :list="['显示', '隐藏']" @change="statusChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式选择</view>
|
||||
<u-subsection :list="['单列', '多列', '时间', '地区']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">默认时间</view>
|
||||
<u-subsection :list="['2019-12-11 20:15:35', '2020-02-05 13:09:42']" @change="defaultTimeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示时分秒</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="minSecChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">默认地区</view>
|
||||
<u-subsection :list="['广东-深圳-宝安', '海南-三亚-海棠']" @change="defaultRegionChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
input: '',
|
||||
rangKey: 'name',
|
||||
mode: 'selector',
|
||||
range: ['一', '片', '冰', '心', '在', '玉', '壶'],
|
||||
defaultTime: '2019-12-11 20:15:35',
|
||||
defaultSelector: [0],
|
||||
defaultRegion: ['广东省', '深圳市', '宝安区'],
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: true,
|
||||
minute: true,
|
||||
second: true,
|
||||
province: true,
|
||||
city: true,
|
||||
area: true,
|
||||
timestamp: true
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
status() {
|
||||
return this.show == true ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusChange(index) {
|
||||
this.show = index == 0 ? true : false;
|
||||
},
|
||||
modeChange(index) {
|
||||
this.mode = ['selector', 'multiSelector', 'time', 'region'][index];
|
||||
if (this.mode == 'selector') {
|
||||
this.range = ['一', '片', '冰', '心', '在', '玉', '壶'];
|
||||
this.defaultSelector = [0];
|
||||
}
|
||||
if (this.mode == 'multiSelector') {
|
||||
this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
|
||||
this.defaultSelector = [0, 0, 0];
|
||||
}
|
||||
this.show = true;
|
||||
},
|
||||
defaultTimeChange(index) {
|
||||
this.defaultTime = index == 0 ? '2019-12-11 20:15:35' : '2020-02-05 13:09:42';
|
||||
this.mode = 'time';
|
||||
this.show = true;
|
||||
},
|
||||
defaultRegionChange(index) {
|
||||
this.defaultRegion = index == 0 ? ['广东省', '深圳市', '宝安区'] : ['海南省', '三亚市', '海棠区'];
|
||||
this.mode = 'region';
|
||||
this.show = true;
|
||||
},
|
||||
minSecChange(index) {
|
||||
if (index == 0) {
|
||||
this.params.hour = true;
|
||||
this.params.minute = true;
|
||||
this.params.second = true;
|
||||
}
|
||||
if (index == 1) {
|
||||
this.params.hour = false;
|
||||
this.params.minute = false;
|
||||
this.params.second = false;
|
||||
}
|
||||
this.mode = 'time';
|
||||
this.show = true;
|
||||
},
|
||||
confirm(e) {
|
||||
// console.log(e);
|
||||
this.input = '';
|
||||
if (this.mode == 'time') {
|
||||
if (this.params.year) this.input += e.year;
|
||||
if (this.params.month) this.input += '-' + e.month;
|
||||
if (this.params.day) this.input += '-' + e.day;
|
||||
if (this.params.hour) this.input += ' ' + e.hour;
|
||||
if (this.params.minute) this.input += ':' + e.minute;
|
||||
if (this.params.second) this.input += ':' + e.second;
|
||||
} else if (this.mode == 'region') {
|
||||
this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
||||
} else if (this.mode == 'selector') {
|
||||
this.input = this.range[e[0]];
|
||||
} else if (this.mode == 'multiSelector') {
|
||||
this.input = this.range[0][e[0]] + '-' + this.range[1][e[1]] + '-' + this.range[2][e[2]];
|
||||
}
|
||||
},
|
||||
columnchange(e) {
|
||||
let column = e.column, index = e.index;
|
||||
this.defaultSelector[column] = index;
|
||||
switch (column) {
|
||||
case 0:
|
||||
switch (index) {
|
||||
case 0:
|
||||
this.range[1] = ['中国', '日本']
|
||||
this.range[2] = ['北京', '上海', '广州']
|
||||
break
|
||||
case 1:
|
||||
this.range[1] = ['英国', '法国']
|
||||
this.range[2] = ['伦敦', '曼彻斯特']
|
||||
break
|
||||
}
|
||||
this.defaultSelector.splice(1, 1, 0)
|
||||
this.defaultSelector.splice(2, 1, 0)
|
||||
break
|
||||
case 1: //拖动第2列
|
||||
switch (this.defaultSelector[0]) { //判断第一列是什么
|
||||
case 0:
|
||||
switch (this.defaultSelector[1]) {
|
||||
case 0:
|
||||
this.range[2] = ['北京', '上海', '广州']
|
||||
break
|
||||
case 1:
|
||||
this.range[2] = ['东京','北海道']
|
||||
break
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
switch (this.defaultSelector[1]) {
|
||||
case 0:
|
||||
this.range[2] = ['伦敦', '曼彻斯特']
|
||||
break
|
||||
case 1:
|
||||
this.range[2] = ['巴黎', '马赛']
|
||||
break
|
||||
}
|
||||
break
|
||||
}
|
||||
this.defaultSelector.splice(2, 1, 0)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input {
|
||||
border: 1px solid $u-light-color;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
height: 30px;
|
||||
font-size: 26rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-steps :direction="direction" :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式</view>
|
||||
<u-subsection :list="['number', 'dot']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">方向</view>
|
||||
<u-subsection :list="['横向', '竖向']" @change="directionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义图标</view>
|
||||
<u-subsection :list="['否', '是']" @change="iconChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">当前步值</view>
|
||||
<u-subsection :list="['1', '2', '3', '4']" @change="stepChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
steps: [{
|
||||
name: '下单'
|
||||
}, {
|
||||
name: '出库'
|
||||
}, {
|
||||
name: '运输'
|
||||
}, {
|
||||
name: '签收'
|
||||
}, ],
|
||||
current: 0,
|
||||
icon: 'checkmark',
|
||||
mode: 'number',
|
||||
direction: 'row'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'number' : 'dot';
|
||||
},
|
||||
stepChange(index) {
|
||||
this.current = [0, 1, 2, 3][index];
|
||||
},
|
||||
iconChange(index) {
|
||||
this.icon = index == 0 ? 'checkmark' : 'map-fill';
|
||||
},
|
||||
directionChange(index) {
|
||||
this.direction = index == 0 ? 'row' : 'column';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 50rpx 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
|
||||
<view class="sticky">
|
||||
宝剑锋从磨砺出,梅花香自苦寒来
|
||||
</view>
|
||||
</u-sticky>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">吸顶高度</view>
|
||||
<u-subsection :list="[0, 120, 200]" @change="offsetTopChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :list="['允许吸顶', '禁止吸顶']" @change="enableChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
offsetTop: 0,
|
||||
enable: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
offsetTopChange(index) {
|
||||
this.offsetTop = index == 0 ? 0 : index == 1 ? 120 : 200;
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 0
|
||||
})
|
||||
},
|
||||
enableChange(index) {
|
||||
this.enable = index == 0 ? true : false;
|
||||
},
|
||||
fixed() {
|
||||
this.$refs.uToast.show({
|
||||
type: 'warning',
|
||||
title: '触发吸顶'
|
||||
})
|
||||
},
|
||||
unfixed() {
|
||||
this.$refs.uToast.show({
|
||||
type: 'success',
|
||||
title: '取消吸顶'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo-area {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-config-wrap {
|
||||
height: 200vh;
|
||||
}
|
||||
|
||||
.u-demo-title {
|
||||
margin-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: $u-type-primary;
|
||||
color: #fff;
|
||||
padding: 24rpx;
|
||||
margin: auto;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d"
|
||||
:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">指示器模式</view>
|
||||
<u-subsection :list="['round', 'rect', 'number', 'none']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">标题</view>
|
||||
<u-subsection current="1" :list="['显示', '隐藏']" @change="titleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">指示器位置</view>
|
||||
<u-subsection current="3" :list="['上左', '上右', '下左', '下中', '下右']" @change="indicatorPosChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">3D效果</view>
|
||||
<u-subsection current="1" :list="['开启', '关闭']" @change="effect3dChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
title: false,
|
||||
mode: 'round',
|
||||
indicatorPos: 'bottomCenter',
|
||||
effect3d: false,
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
titleChange(index) {
|
||||
this.title = index == 0 ? true : false;
|
||||
},
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'round' : index == 1 ? 'rect' : index == 2 ? 'number' : 'none';
|
||||
},
|
||||
indicatorPosChange(index) {
|
||||
this.indicatorPos = index == 0 ? 'topLeft' : index == 1 ? 'topRight' : index == 2 ? 'bottomLeft' : index == 3 ? 'bottomCenter' : 'bottomRight';
|
||||
},
|
||||
effect3dChange(index) {
|
||||
this.effect3d = index == 0 ? true : false;
|
||||
},
|
||||
click(index) {
|
||||
this.$refs.uToast.show({
|
||||
title: `点击了第${index + 1}张图片`,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
change(index) {
|
||||
// console.log(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-demo">
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">凸起按钮</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="minButtonChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">背景色</view>
|
||||
<u-subsection :list="['#ffffff', '#1f1f1d']" @change="bgColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">顶部边框</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="borderTopChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">提示角标</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="badgeChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-tabbar
|
||||
v-model="current"
|
||||
:show="show"
|
||||
:bg-color="bgColor"
|
||||
:border-top="borderTop"
|
||||
:list="list"
|
||||
:mid-button="midButton"
|
||||
:inactive-color="inactiveColor"
|
||||
:activeColor="activeColor"
|
||||
></u-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
show: true,
|
||||
bgColor: '#ffffff',
|
||||
borderTop: true,
|
||||
list: [{
|
||||
iconPath: "home",
|
||||
selectedIconPath: "home-fill",
|
||||
text: '首页',
|
||||
count: 2,
|
||||
isDot: true,
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: "photo",
|
||||
selectedIconPath: "photo-fill",
|
||||
text: '放映厅',
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: "/static/uview/example/min_button.png",
|
||||
selectedIconPath: "/static/uview/example/min_button_select.png",
|
||||
text: '发布',
|
||||
midButton: true,
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: "play-right",
|
||||
selectedIconPath: "play-right-fill",
|
||||
text: '直播',
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: "account",
|
||||
selectedIconPath: "account-fill",
|
||||
text: '我的',
|
||||
count: 23,
|
||||
isDot: false,
|
||||
customIcon: false,
|
||||
},
|
||||
],
|
||||
midButton: true,
|
||||
inactiveColor: '#909399',
|
||||
activeColor: '#5098FF'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeSwitch(index) {
|
||||
return true;
|
||||
},
|
||||
showChange(index) {
|
||||
this.show = !index;
|
||||
},
|
||||
bgColorChange(index) {
|
||||
if(index == 0) {
|
||||
this.activeColor = '#5098FF';
|
||||
this.inactiveColor = '#909399';
|
||||
}
|
||||
if(index == 1) {
|
||||
this.activeColor = '#D0D0D0';
|
||||
this.inactiveColor = '#5A5A5A';
|
||||
}
|
||||
this.bgColor = ['#ffffff', '#1f1f1d'][index];
|
||||
},
|
||||
borderTopChange(index) {
|
||||
this.borderTop = !index;
|
||||
},
|
||||
badgeChange(index) {
|
||||
if (index == 1) {
|
||||
this.list[0].count = 0;
|
||||
this.list[4].count = 0;
|
||||
} else {
|
||||
this.list[0].count = 2;
|
||||
this.list[4].count = 23;
|
||||
}
|
||||
},
|
||||
minButtonChange(index) {
|
||||
this.midButton = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo-area {
|
||||
margin: 0 -40rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-table :align="align" :borderColor="borderColor">
|
||||
<u-tr class="u-tr">
|
||||
<u-th class="u-th">姓名</u-th>
|
||||
<u-th class="u-th">年龄</u-th>
|
||||
<u-th class="u-th">籍贯</u-th>
|
||||
<u-th class="u-th">性别</u-th>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">吕布</u-td>
|
||||
<u-td class="u-td">22</u-td>
|
||||
<u-td class="u-td">楚河</u-td>
|
||||
<u-td class="u-td">男</u-td>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">项羽</u-td>
|
||||
<u-td class="u-td">28</u-td>
|
||||
<u-td class="u-td">汉界</u-td>
|
||||
<u-td class="u-td">男</u-td>
|
||||
</u-tr>
|
||||
<u-tr class="u-tr">
|
||||
<u-td class="u-td">木兰</u-td>
|
||||
<u-td class="u-td">24</u-td>
|
||||
<u-td class="u-td">南国</u-td>
|
||||
<u-td class="u-td">女</u-td>
|
||||
</u-tr>
|
||||
</u-table>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">边框颜色</view>
|
||||
<u-subsection :list="['gray', 'primary', 'warning']" @change="borderColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">对齐方式</view>
|
||||
<u-subsection current="1" :list="['左', '中', '右']" @change="alignChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mode: false,
|
||||
borderColor: '#e4e7ed',
|
||||
align: 'center',
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
// #ifdef MP-WEIXIN
|
||||
return this.$u.toast('微信小程序暂不支持单元格合并')
|
||||
// #endif
|
||||
this.mode = index == 0 ? true : false;
|
||||
this.key ++;
|
||||
},
|
||||
borderColorChange(index) {
|
||||
this.borderColor = index == 0 ? '#e4e7ed' : index == 1 ? '#2979ff' : '#ff9900';
|
||||
},
|
||||
alignChange(index) {
|
||||
this.align = index == 0 ? 'left' : index == 1 ? 'center' : 'right';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<view class="pre-box" v-if="!showUploadList">
|
||||
<view class="pre-item" v-for="(item, index) in lists" :key="index">
|
||||
<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
|
||||
<view class="u-delete-icon" @tap.stop="deleteItem(index)">
|
||||
<u-icon name="close" size="20" color="#ffffff"></u-icon>
|
||||
</view>
|
||||
<u-line-progress v-if="item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress"
|
||||
:percent="item.progress"></u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
<u-upload @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
|
||||
:show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange">
|
||||
<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
|
||||
<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
|
||||
</view>
|
||||
</u-upload>
|
||||
<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
|
||||
<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
|
||||
<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">上传方式</view>
|
||||
<u-subsection current="1" :list="['自动上传', '手动上传']" @change="autoUploadChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义控件(进度条和删除按钮)</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="controlChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">最大上传数量</view>
|
||||
<u-subsection current="1" :list="['1', '2', '4']" @change="maxCountChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式(预览区域和上传按钮)</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="customStyleChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
action: 'http://127.0.0.1:7001/upload',
|
||||
// 预置上传列表
|
||||
fileList: [],
|
||||
// fileList: [{
|
||||
// url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
|
||||
// error: false,
|
||||
// progress: 100
|
||||
// }],
|
||||
showUploadList: true,
|
||||
customBtn: false,
|
||||
autoUpload: false,
|
||||
showProgress: true,
|
||||
deletable: true,
|
||||
customStyle: false,
|
||||
maxCount: 2,
|
||||
lists: [], // 组件内部的文件列表
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
reUpload() {
|
||||
this.$refs.uUpload.reUpload();
|
||||
},
|
||||
clear() {
|
||||
this.$refs.uUpload.clear();
|
||||
},
|
||||
autoUploadChange(index) {
|
||||
this.autoUpload = index == 0 ? true : false;
|
||||
},
|
||||
controlChange(index) {
|
||||
if(index == 0) {
|
||||
this.showProgress = true;
|
||||
this.deletable = true;
|
||||
} else {
|
||||
this.showProgress = false;
|
||||
this.deletable = false;
|
||||
}
|
||||
},
|
||||
maxCountChange(index) {
|
||||
this.maxCount = index == 0 ? 1 : index == 1 ? 2 : 4;
|
||||
},
|
||||
customStyleChange(index) {
|
||||
if (index == 0) {
|
||||
this.showUploadList = false;
|
||||
this.customBtn = true;
|
||||
|
||||
} else {
|
||||
this.showUploadList = true;
|
||||
this.customBtn = false;
|
||||
}
|
||||
},
|
||||
upload() {
|
||||
this.$refs.uUpload.upload();
|
||||
},
|
||||
deleteItem(index) {
|
||||
this.$refs.uUpload.remove(index);
|
||||
},
|
||||
onOversize(file, lists) {
|
||||
// console.log('onOversize', file, lists);
|
||||
},
|
||||
onPreview(url, lists) {
|
||||
// console.log('onPreview', url, lists);
|
||||
},
|
||||
onRemove(index, lists) {
|
||||
// console.log('onRemove', index, lists);
|
||||
},
|
||||
onSuccess(data, index, lists) {
|
||||
// console.log('onSuccess', data, index, lists);
|
||||
},
|
||||
onChange(res, index, lists) {
|
||||
// console.log('onChange', res, index, lists);
|
||||
},
|
||||
error(res, index, lists) {
|
||||
// console.log('onError', res, index, lists);
|
||||
},
|
||||
onProgress(res, index, lists) {
|
||||
// console.log('onProgress', res, index, lists);
|
||||
},
|
||||
onUploaded(lists) {
|
||||
// console.log('onUploaded', lists);
|
||||
},
|
||||
onListChange(lists) {
|
||||
// console.log('onListChange', lists);
|
||||
this.lists = lists;
|
||||
},
|
||||
beforeRemove(index, lists) {
|
||||
return true;
|
||||
},
|
||||
onChooseFail(e) {
|
||||
// console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-demo-wrap {
|
||||
background-color: #FFFFFF;
|
||||
padding: 40rpx 8rpx;
|
||||
margin-left: -14rpx;
|
||||
margin-right: -14rpx;
|
||||
}
|
||||
|
||||
.u-add-wrap {
|
||||
flex-direction: column;
|
||||
color: $u-content-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/deep/ .slot-btn {
|
||||
width: 329rpx;
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgb(244, 245, 246);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.slot-btn__hover {
|
||||
background-color: rgb(235, 236, 238);
|
||||
}
|
||||
|
||||
.pre-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pre-item {
|
||||
flex: 0 0 48.5%;
|
||||
border-radius: 10rpx;
|
||||
height: 140rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.u-progress {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 8rpx;
|
||||
right: 8rpx;
|
||||
z-index: 9;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pre-item-image {
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.u-delete-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
z-index: 10;
|
||||
background-color: $u-type-error;
|
||||
border-radius: 100rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-button @click="showAction">唤起ActionSheet</u-button>
|
||||
<u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips"
|
||||
@click="click" :list="list" v-model="show" :safe-area-inset-bottom="true"></u-action-sheet>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">取消按钮</view>
|
||||
<u-subsection :list="['是', '否']" @change="cancelChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">点击遮罩关闭</view>
|
||||
<u-subsection :list="['是', '否']" @change="maskClickChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
text: '最是人间留不住',
|
||||
}, {
|
||||
text: '朱颜辞镜花辞树',
|
||||
disabled: true
|
||||
}, {
|
||||
text: '正是江南好风景',
|
||||
subText: '春江水暖鸭先知'
|
||||
}, {
|
||||
text: '落花时节又逢君'
|
||||
}],
|
||||
tips: {
|
||||
text: ''
|
||||
},
|
||||
show: false,
|
||||
cancel: true,
|
||||
maskClick: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAction() {
|
||||
this.show = true;
|
||||
},
|
||||
click(index) {
|
||||
this.$refs.uToast.show({
|
||||
type: 'success',
|
||||
title: '点击了第' + (index + 1) + '项'
|
||||
})
|
||||
},
|
||||
tipsChange(index) {
|
||||
if(index == 0) this.show = true;
|
||||
this.tips.text = index == 0 ? '请谨慎执行您的操作' : ''
|
||||
},
|
||||
cancelChange(index) {
|
||||
this.show = true;
|
||||
this.cancel = index == 0 ? true : false
|
||||
},
|
||||
maskClickChange(index) {
|
||||
if(index == 1) this.cancel = true;
|
||||
this.show = true;
|
||||
this.maskClick = index == 0 ? true : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-alert-tips @close="close" :closeAble="closeAble" :show="show" @click="click"
|
||||
:type="type" :title="title" :description="description" :showIcon="showIcon"></u-alert-tips>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">左侧图标</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="showIconChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">关闭图标</view>
|
||||
<u-subsection current="1" :list="['显示', '隐藏']" @change="closeAbleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主题</view>
|
||||
<u-subsection current="3" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :current="current" :list="['开启', '关闭']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '大漠孤烟直，长河落日圆',
|
||||
description: "月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。飞流直下三千尺，疑是银河落九天！",
|
||||
show: true,
|
||||
closeAble: false,
|
||||
showIcon: false,
|
||||
type: 'warning',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.show ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showIconChange(index) {
|
||||
this.showIcon = index == 0 ? true : false;
|
||||
},
|
||||
showChange(index) {
|
||||
this.show = index == 0 ? true : false;
|
||||
},
|
||||
closeAbleChange(index) {
|
||||
this.closeAble = index == 0 ? true : false;
|
||||
},
|
||||
typeChange(index) {
|
||||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.$refs.uToast.show({
|
||||
type: 'warning',
|
||||
title: '点击关闭按钮'
|
||||
})
|
||||
},
|
||||
click() {
|
||||
this.$refs.uToast.show({
|
||||
type: 'warning',
|
||||
title: '点击内容'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<view class="u-badge-wrap"><u-badge :is-center="isCenter" :type="type" :count="count" :is-dot="isDot" :offset="offset" :size="size"></u-badge></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">数值显示</view>
|
||||
<u-subsection current="1" :list="[0, 8, 15, 106, 209]" @change="countChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主题选择</view>
|
||||
<u-subsection current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示点</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">尺寸</view>
|
||||
<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">位置偏移</view>
|
||||
<u-subsection current="1" :list="['[20, 20]', '[-8, -8]', '[-20, -20]']" @change="offsetChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">中心点与父右上角重合</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="isCenterChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 8,
|
||||
type: 'error',
|
||||
isDot: false,
|
||||
offset: [-8, -8],
|
||||
size: 'default',
|
||||
isCenter: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
countChange(index) {
|
||||
this.count = index == 0 ? 0 : index == 1 ? 8 : index == 2 ? 15 : index == 3 ? 106 : 209;
|
||||
},
|
||||
typeChange(index) {
|
||||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? 'default' : 'mini';
|
||||
},
|
||||
isDotChange(index) {
|
||||
this.isDot = index == 0 ? true : false;
|
||||
},
|
||||
offsetChange(index) {
|
||||
this.offset = index == 0 ? [20, 20] : index == 1 ? [-8, -8] : [-20, -20];
|
||||
},
|
||||
isCenterChange(index) {
|
||||
this.isCenter = index == 0 ? true : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-badge-wrap {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
background-color: $u-light-color;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="item">
|
||||
<u-circle-progress type="warning" :percent="percent">
|
||||
<view class="u-progress-content">
|
||||
<view class="u-progress-dot"></view>
|
||||
<text class='u-progress-info'>查找中</text>
|
||||
</view>
|
||||
</u-circle-progress>
|
||||
<u-circle-progress type="warning" :width="150" :percent="percent">
|
||||
<view class="u-progress-content">
|
||||
<view class="u-progress-dot"></view>
|
||||
<text class='u-progress-info'>查找中</text>
|
||||
</view>
|
||||
</u-circle-progress>
|
||||
</view>
|
||||
<view class="item">
|
||||
<u-line-progress></u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percent: 33
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.percent = 50;
|
||||
}, 1500);
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.u-progress-content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-progress-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fb9126;
|
||||
}
|
||||
|
||||
.u-progress-info {
|
||||
font-size: 28rpx;
|
||||
padding-left: 16rpx;
|
||||
letter-spacing: 2rpx
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap" style="background-color: #ffffff;">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
|
||||
<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
|
||||
{{item.body}}
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">手风琴模式</view>
|
||||
<u-subsection :list="['是', '否']" @change="accordionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">右侧箭头</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="arrowChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemList: [{
|
||||
head: "赏识在于角度的转换",
|
||||
body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来：闪光的道德、妙异的智慧、优美的人情…… 赏识不是单向的施舍，是智慧与智慧的主动碰撞",
|
||||
show: false,
|
||||
}, {
|
||||
head: "生活中不是缺少美，而是缺少发现美的眼睛",
|
||||
body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
|
||||
show: false,
|
||||
}, {
|
||||
head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
|
||||
body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美，用它绝对雕不出好的艺术品，总之它被批评为一块不受人赏识的普通石头",
|
||||
show: false,
|
||||
}, {
|
||||
head: "点燃心中的火焰，找回了自信和人生的价值",
|
||||
body: "他随手翻了几页，竟被一篇题名为《童年》的小说所吸引，作者是一个初出茅庐的无名小辈，但屠格涅夫却十分欣赏，钟爱有加",
|
||||
show: false,
|
||||
}, {
|
||||
head: "因为赏识，那块被人不耻的石头变成了雕塑",
|
||||
body: "这个材料反应的就是赏识的问题，赏识是一种理解和信任，包含了肯定与欣赏，也是一种激励和引导，可以使人悔过自新，扬长避短，更健康地成长和进步",
|
||||
show: false,
|
||||
}],
|
||||
accordion: true,
|
||||
arrow: true,
|
||||
hoverClass: 'hover2',
|
||||
itemStyle: {},
|
||||
key: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
accordionChange(index) {
|
||||
this.accordion = index == 0 ? true : false;
|
||||
},
|
||||
arrowChange(index) {
|
||||
this.arrow = index == 0 ? true : false;
|
||||
this.changeStatus();
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.itemStyle = {
|
||||
border: '1px solid rgb(230, 230, 230)',
|
||||
marginTop: '20px',
|
||||
padding: '0 8rpx'
|
||||
}
|
||||
} else {
|
||||
this.itemStyle = {}
|
||||
}
|
||||
this.changeStatus();
|
||||
},
|
||||
change(index) {
|
||||
let str = '';
|
||||
if(Array.isArray(index)) {
|
||||
let arr = index.map(val => {
|
||||
return Number(val) + 1;
|
||||
})
|
||||
index = arr.join(',');
|
||||
} else {
|
||||
index = Number(index) + 1;
|
||||
}
|
||||
this.$refs.uToast.show({
|
||||
title: `点击了第${index}个`,
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
itemChange(e) {
|
||||
console.log(e);
|
||||
},
|
||||
changeStatus() {
|
||||
this.key = false;
|
||||
this.$nextTick(function(){
|
||||
this.key = true;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hover1 {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
// padding: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
//padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
font-size: 30rpx;
|
||||
color: $u-main-color;
|
||||
line-height: 1;
|
||||
padding: 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: 28rpx;
|
||||
color: $u-tips-color;
|
||||
line-height: 1.4;
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
主色调
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #2979ff;">
|
||||
<view class="color-title">
|
||||
Primary
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#2979ff
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #2b85e4;">
|
||||
<view class="color-title">
|
||||
Dark
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#2b85e4
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #a0cfff;">
|
||||
<view class="color-title">
|
||||
Disabled
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#a0cfff
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #ecf5ff;color: #909399;">
|
||||
<view class="color-title">
|
||||
Light
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#ecf5ff
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
Error
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #fa3534;">
|
||||
<view class="color-title">
|
||||
Error
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#fa3534
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #dd6161;">
|
||||
<view class="color-title">
|
||||
Dark
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#dd6161
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #fab6b6;">
|
||||
<view class="color-title">
|
||||
Disabled
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#fab6b6
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #fef0f0;color: #909399;">
|
||||
<view class="color-title">
|
||||
Light
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#fef0f0
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
Warning
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #ff9900;">
|
||||
<view class="color-title">
|
||||
Warning
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#ff9900
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #f29100;">
|
||||
<view class="color-title">
|
||||
Dark
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#f29100
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #fcbd71;">
|
||||
<view class="color-title">
|
||||
Disabled
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#fcbd71
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #fdf6ec;color: #909399;">
|
||||
<view class="color-title">
|
||||
Light
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#fdf6ec
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
Info
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #909399;">
|
||||
<view class="color-title">
|
||||
Info
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#909399
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #82848a;">
|
||||
<view class="color-title">
|
||||
Dark
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#82848a
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #c8c9cc;">
|
||||
<view class="color-title">
|
||||
Disabled
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#c8c9cc
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #f4f4f5;color: #909399;">
|
||||
<view class="color-title">
|
||||
Light
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#f4f4f5
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
Success
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #19be6b;">
|
||||
<view class="color-title">
|
||||
Success
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#19be6b
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #18b566;">
|
||||
<view class="color-title">
|
||||
Dark
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#18b566
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #71d5a1;">
|
||||
<view class="color-title">
|
||||
Disabled
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#71d5a1
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #dbf1e1;color: #909399;">
|
||||
<view class="color-title">
|
||||
Light
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#dbf1e1
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
文字颜色
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #303133;">
|
||||
<view class="color-title">
|
||||
主要文字
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#303133
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #606266;">
|
||||
<view class="color-title">
|
||||
常规文字
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#606266
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #909399;">
|
||||
<view class="color-title">
|
||||
次要文字
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#909399
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #c0c4cc;">
|
||||
<view class="color-title">
|
||||
占位文字
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#c0c4cc
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
边框颜色
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #dcdfe6;color: #909399;">
|
||||
<view class="color-title">
|
||||
一级边框
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#dcdfe6
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #e4e7ed;color: #909399;">
|
||||
<view class="color-title">
|
||||
二级边框
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#e4e7ed
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #ebeef5;color: #909399;">
|
||||
<view class="color-title">
|
||||
三级边框
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#ebeef5
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-item" style="background: #f2f6fc;color: #909399;">
|
||||
<view class="color-title">
|
||||
四级边框
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#f2f6fc
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
背景颜色
|
||||
</view>
|
||||
<view class="color-box">
|
||||
<view class="color-item" style="background: #f3f4f6;color: #909399;">
|
||||
<view class="color-title">
|
||||
背景颜色
|
||||
</view>
|
||||
<view class="color-value">
|
||||
#f3f4f6
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
getApp().globalData.username = 'test12';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 18rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 30rpx 0;
|
||||
margin-top: 44rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
padding-left: 22rpx;
|
||||
|
||||
&:before {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
border-radius: 100rpx;
|
||||
background-color: $u-content-color;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6rpx;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.color-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 0 8rpx;
|
||||
flex-direction: column;
|
||||
border-radius: 6rpx;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
|
||||
.color-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-count-down class="count-down-demo" :timestamp="timestamp" :separator="separator" :showBorder="showBorder"
|
||||
:separator-color="separatorColor" :showDays="showDays" :fontSize="fontSize" @change="change" ref="uCountDown"
|
||||
:border-color="borderColor" :color="color" @end="end" bg-color="rgb(250, 250, 250)"></u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">调整时间</view>
|
||||
<u-subsection :list="['60', '86400', '983272']" @change="timestampChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">分隔符</view>
|
||||
<u-subsection :list="['英文冒号', '中文名称']" @change="separatorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示天</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="showDaysChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">字体大小</view>
|
||||
<u-subsection current="1" :list="['26', '30', '34']" @change="fontSizeChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timestamp: 60,
|
||||
separator: 'colon',
|
||||
showBorder: false,
|
||||
borderColor: '#303133',
|
||||
color: '#303133',
|
||||
showDays: false,
|
||||
fontSize: 30,
|
||||
separatorColor: '#303133',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
timestampChange(index) {
|
||||
this.timestamp = index == 0 ? 60 : index == 1 ? 86400 : 983272;
|
||||
},
|
||||
separatorChange(index) {
|
||||
this.separator = index == 0 ? 'colon' : 'zh';
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.showBorder = true;
|
||||
this.borderColor = this.$u.color['primary'];
|
||||
this.color = this.$u.color['primary'];
|
||||
this.separatorColor = this.$u.color['primary'];
|
||||
} else {
|
||||
this.showBorder = false;
|
||||
this.borderColor = '#303133';
|
||||
this.color = '#303133';
|
||||
this.separatorColor = '#303133';
|
||||
}
|
||||
},
|
||||
showDaysChange(index) {
|
||||
this.showDays = index == 0 ? true : false;
|
||||
},
|
||||
fontSizeChange(index) {
|
||||
this.fontSize = index == 0 ? 26 : index == 1 ? 30 : 34;
|
||||
},
|
||||
end() {
|
||||
this.$refs.uToast.show({
|
||||
title: '倒计时结束',
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
change(timestamp) {
|
||||
// console.log(timestamp);
|
||||
},
|
||||
getSeconds() {
|
||||
// console.log(this.$refs.uCountDown.seconds);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.count-down-demo {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<!--
|
||||
* @Desc: --- ----
|
||||
* @Date: 2020-04-22 12:29:21
|
||||
* @LastEditors: 王
|
||||
* @LastEditTime: 2020-04-22 18:33:28
|
||||
-->
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">背景颜色</view>
|
||||
<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="bgColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">高度</view>
|
||||
<u-subsection :list="['30', '50', '70']" @change="heightChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">上下外边距</view>
|
||||
<u-subsection :list="['30', '50', '70']" @change="marginChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: 30,
|
||||
bgColor: this.$u.color.bgColor,
|
||||
marginTop: 30,
|
||||
marginBottom: 30
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
bgColorChange(index) {
|
||||
let color = index == 0 ? 'default' : index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
|
||||
this.bgColor = color == 'default' ? this.$u.color['bgColor'] : this.$u.color[color];
|
||||
},
|
||||
heightChange(index) {
|
||||
this.height = index == 0 ? 30 : index == 1 ? 50 : 70;
|
||||
},
|
||||
marginChange(index) {
|
||||
this.marginTop = ['30', '50', '70'][index];
|
||||
this.marginBottom = this.marginTop;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-grid :col="col" @click="click" v-if="!isSwiper" :border="border">
|
||||
<u-grid-item name="item1" :index="0" @click="itemClick">
|
||||
<u-badge count="9" :offset="[col == 3 ? 20 : 14, col == 3 ? 30 : 20]"></u-badge>
|
||||
<u-icon name="photo" :size="46"></u-icon>
|
||||
<view class="grid-text">图片</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="1">
|
||||
<u-icon name="lock" :size="46"></u-icon>
|
||||
<view class="grid-text">锁头</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="2">
|
||||
<image src="https://cdn.uviewui.com/uview/grid/hot5.png" :style="{
|
||||
top: col == 3 ? '14rpx' : '8rpx',
|
||||
right: col == 3 ? '40rpx' : '28rpx'
|
||||
}" style="width: 34rpx;height: 34rpx;" class="badge-icon" mode="widthFix"></image>
|
||||
<u-icon name="hourglass" :size="46"></u-icon>
|
||||
<view class="grid-text">沙漏</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="3">
|
||||
<u-icon name="home" :size="46"></u-icon>
|
||||
<view class="grid-text">首页</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="4">
|
||||
<u-icon name="star" :size="46"></u-icon>
|
||||
<view class="grid-text">星星</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="5">
|
||||
<u-icon name="volume-up" :size="46"></u-icon>
|
||||
<view class="grid-text">音量</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="6">
|
||||
<image src="https://cdn.uviewui.com/uview/grid/hot6.png" style="width: 44rpx;height: 44rpx;top:0;right:0;" class="badge-icon"></image>
|
||||
<u-icon name="trash" :size="46"></u-icon>
|
||||
<view class="grid-text">回收站</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="7">
|
||||
<u-icon name="rewind-right" :size="46"></u-icon>
|
||||
<view class="grid-text">快进</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item :index="8">
|
||||
<u-icon name="shopping-cart" :size="46"></u-icon>
|
||||
<view class="grid-text">购物车</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
<swiper class="swiper" v-else @change="change">
|
||||
<swiper-item>
|
||||
<u-grid :border="border" :col="col" @click="click" hover-class="hover-class">
|
||||
<u-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<u-icon :name="item" :size="46"></u-icon>
|
||||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="border" :col="col" @click="click">
|
||||
<u-grid-item v-for="(item, index) in list" :index="index + 9" :key="index">
|
||||
<u-icon :name="item" :size="46"></u-icon>
|
||||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="border" :col="col" @click="click">
|
||||
<u-grid-item v-for="(item, index) in list" :index="index + 18" :key="index">
|
||||
<u-icon :name="item" :size="46"></u-icon>
|
||||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indicator-dots" v-if="isSwiper">
|
||||
<view class="indicator-dots-item" :class="[current == 0 ? 'indicator-dots-active' : '']">
|
||||
</view>
|
||||
<view class="indicator-dots-item" :class="[current == 1 ? 'indicator-dots-active' : '']">
|
||||
</view>
|
||||
<view class="indicator-dots-item" :class="[current == 2 ? 'indicator-dots-active' : '']">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否显示边框</view>
|
||||
<u-subsection :list="['是', '否']" @change="borderChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否可滑动</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="isSwiperChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">修改列数</view>
|
||||
<u-subsection :list="['3', '4']" @change="colChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
|
||||
isSwiper: false,
|
||||
current: 0,
|
||||
border: true,
|
||||
col: 3
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isSwiperChange(index) {
|
||||
this.isSwiper = index == 0 ? true : false;
|
||||
},
|
||||
borderChange(index) {
|
||||
this.border = index == 0 ? true : false;
|
||||
},
|
||||
colChange(index) {
|
||||
this.col = index == 0 ? 3 : 4;
|
||||
},
|
||||
click(index) {
|
||||
this.$refs.uToast.show({
|
||||
title: `点击了第${index + 1}宫格`,
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
// 针对单个grid-item的事件
|
||||
itemClick(index) {
|
||||
// console.log(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid-text {
|
||||
font-size: 28rpx;
|
||||
margin-top: 4rpx;
|
||||
color: $u-type-info;
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 480rpx;
|
||||
}
|
||||
|
||||
.indicator-dots {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.indicator-dots-item {
|
||||
background-color: $u-tips-color;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 10px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.indicator-dots-active {
|
||||
background-color: $u-type-primary;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<view class="u-no-demo-here">
|
||||
请点击弹出遮罩查看效果
|
||||
</view>
|
||||
<u-mask :show="show" @click="show = false" :zoom="zoom" :duration="duration">
|
||||
<view class="warp" v-if="content">
|
||||
<view class="rect" @tap.stop></view>
|
||||
</view>
|
||||
</u-mask>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">缩放效果</view>
|
||||
<u-subsection :list="['是', '否']" @change="zoomChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">内容填充</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">动画时长(ms)</view>
|
||||
<u-subsection current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
zoom: true,
|
||||
duration: 300,
|
||||
content: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.show ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showChange(index) {
|
||||
this.show = index == 0 ? true : false;
|
||||
},
|
||||
zoomChange(index) {
|
||||
this.zoom = index == 0 ? true : false;
|
||||
this.show = true;
|
||||
},
|
||||
durationChange(index) {
|
||||
this.duration = index == 0 ? 100 : index == 1 ? 300 : 800;
|
||||
this.show = true;
|
||||
},
|
||||
contentChange(index) {
|
||||
this.content = index == 0 ? true : false;
|
||||
this.show = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rect {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-number-box v-model="value" :bg-color="bgColor" :color="color" :min="0"
|
||||
:step="step" :disabled="disabled" @change="change" @focus="focus"></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">初始值</view>
|
||||
<u-subsection :list="[1, 5, 18]" @change="valueChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否禁用</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">步进值</view>
|
||||
<u-subsection :list="[1, 3, 5, 8]" @change="stepChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1,
|
||||
bgColor: "#F2F3F5",
|
||||
color: '#323233',
|
||||
disabled: false,
|
||||
step: 1,
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
valueChange(index) {
|
||||
this.value = index == 0 ? 1 : index == 1 ? 5 : 18;
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.bgColor = '#ff6d00';
|
||||
this.color = '#fff';
|
||||
} else {
|
||||
this.bgColor = "#F2F3F5";
|
||||
this.color = '#323233';
|
||||
}
|
||||
},
|
||||
disabledChange(index) {
|
||||
this.disabled = index == 0 ? true : false;
|
||||
},
|
||||
stepChange(index) {
|
||||
this.step = index == 0 ? 1 : index == 1 ? 3 : index == 2 ? 5 : 8;
|
||||
},
|
||||
change(e) {
|
||||
//console.log(e.value);
|
||||
},
|
||||
focus() {
|
||||
console.log('focus');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-button @click="btnClick">唤起弹窗</u-button>
|
||||
<u-popup border-radius="10" v-model="show"
|
||||
@close="close" @open="open" :mode="mode"
|
||||
length="50%" :mask="mask"
|
||||
:closeable="closeable"
|
||||
:close-icon-pos="closeIconPos"
|
||||
>
|
||||
<view v-if="mode == 'center'" style="height: 400rpx">
|
||||
<view class="close-btn">
|
||||
<u-button @click="show = false;" size="medium">关闭弹窗</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="close-btn" v-if="mode != 'center'">
|
||||
<u-button size="medium" @click="show = false;">关闭弹窗</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">状态</view>
|
||||
<u-subsection :current="show == false ? 1 : 0" :list="['打开', '关闭']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">弹出方向</view>
|
||||
<u-subsection :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">关闭按钮</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="closeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">关闭按钮位置</view>
|
||||
<u-subsection :current="1" :list="['左上角', '右上角', '左下角', '右下角']" @change="closePosChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mode: 'left',
|
||||
mask: true, // 是否显示遮罩
|
||||
closeable: true,
|
||||
closeIconPos: 'top-right'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(n) {
|
||||
// console.log(n);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'top' : index == 1 ? 'bottom' : index == 2 ? 'left' : index == 3 ? 'right' : 'center';
|
||||
this.show = true;
|
||||
},
|
||||
showChange(index) {
|
||||
this.show = index == 0 ? true : false;
|
||||
},
|
||||
closeChange(index) {
|
||||
this.closeable = !index;
|
||||
},
|
||||
closePosChange(index) {
|
||||
this.closeIconPos = ['top-left', 'top-right', 'bottom-left', 'bottom-right'][index];
|
||||
},
|
||||
close() {
|
||||
// console.log('close');
|
||||
},
|
||||
open() {
|
||||
// console.log('open');
|
||||
},
|
||||
btnClick() {
|
||||
this.show = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-line-progress v-if="mode == 'line'" :percent="percent" :active-color="activeColor"
|
||||
:striped="striped" :stripedActive="stripedActive"></u-line-progress>
|
||||
<u-circle-progress v-else :percent="percent" :active-color="activeColor"
|
||||
bg-color="rgb(250, 250, 250)">
|
||||
<view class="u-progress-content">
|
||||
<view class="u-progress-dot"></view>
|
||||
<text class='u-progress-info'>查找中</text>
|
||||
</view>
|
||||
</u-circle-progress>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">模式选择</view>
|
||||
<u-subsection :current="current" :list="['线型', '圆型']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">增减</view>
|
||||
<u-subsection :list="['减少30%', '增加30%']" @change="calcChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义样式(线型时有效)</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">动态条纹(线型时有效)</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="stripedChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percent: 50,
|
||||
mode: 'line',
|
||||
activeColor: '#19be6b',
|
||||
striped: false,
|
||||
stripedActive: false,
|
||||
current: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.current = index;
|
||||
this.mode = index == 0 ? 'line' : 'circle';
|
||||
},
|
||||
calcChange(index) {
|
||||
this.percent = index == 0 ? (this.percent - 30) : (this.percent + 30);
|
||||
if(this.percent > 100) this.percent = 100;
|
||||
if(this.percent < 0) this.percent = 0;
|
||||
},
|
||||
styleChange(index) {
|
||||
this.activeColor = index == 0 ? this.$u.color['error'] : '#19be6b';
|
||||
if(index == 0) {
|
||||
this.mode = 'line';
|
||||
this.current = 0;
|
||||
}
|
||||
},
|
||||
stripedChange(index) {
|
||||
this.striped = index == 0 ? true : false;
|
||||
this.stripedActive = this.striped;
|
||||
if(index == 0) {
|
||||
this.mode = 'line';
|
||||
this.current = 0;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-progress-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-progress-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fb9126;
|
||||
}
|
||||
|
||||
.u-progress-info {
|
||||
font-size: 28rpx;
|
||||
padding-left: 16rpx;
|
||||
letter-spacing: 2rpx
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-section :title="title" :right="right" :bold="bold" :color="color" :show-line="showLine"></u-section>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">更换主标题</view>
|
||||
<u-subsection :current="1" :list="['是', '否']" @change="titleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">竖条状态</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="showLineChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否显示右边部分</view>
|
||||
<u-subsection :list="['是', '否']" @change="rightChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主标题粗体</view>
|
||||
<u-subsection :list="['是', '否']" @change="boldChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">主标题颜色</view>
|
||||
<u-subsection :list="['默认', '自定义']" @change="colorChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '红豆生南国',
|
||||
bold: true,
|
||||
right: true,
|
||||
color: this.$u.color['mainColor'],
|
||||
showLine: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
titleChange(index) {
|
||||
if(index == 0) this.title = '春来发几枝';
|
||||
else this.title = '红豆生南国';
|
||||
},
|
||||
rightChange(index) {
|
||||
this.right = index == 0 ? true : false;
|
||||
},
|
||||
boldChange(index) {
|
||||
this.bold = index == 0 ? true : false;
|
||||
},
|
||||
colorChange(index) {
|
||||
this.color = index == 0 ? this.$u.color['mainColor'] : this.$u.color['primary'];
|
||||
},
|
||||
showLineChange(index) {
|
||||
this.showLine = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue