小程序登录、首页
This commit is contained in:
parent
3e88a397ac
commit
cf12717b08
|
|
@ -2,7 +2,7 @@
|
|||
ENV = 'development'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = 'http://localhost:8000/api'
|
||||
VUE_APP_BASE_API = 'http://10.0.11.127:8000/api'
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
node_modules/*
|
||||
deploy.sh
|
||||
package-lock.json
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"type": "uniCloud",
|
||||
"default": {
|
||||
"launchtype": "remote"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export default {
|
||||
// 此处globalData为了演示其作用，不是uView框架的一部分
|
||||
globalData: {
|
||||
username: '白居易'
|
||||
},
|
||||
onLaunch() {
|
||||
// 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中
|
||||
// 注意，需要在/main.js中实例化Vue之后引入如下(详见文档说明)：
|
||||
// import httpInterceptor from '@/common/http.interceptor.js'
|
||||
// Vue.use(httpInterceptor, app)
|
||||
// process.env.VUE_APP_PLATFORM 为通过js判断平台名称的方法，结果分别如下：
|
||||
/**
|
||||
* h5，app-plus(nvue下也为app-plus)，mp-weixin，mp-alipay......
|
||||
*/
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "uview-ui/index.scss";
|
||||
@import "common/demo.scss";
|
||||
</style>
|
||||
|
|
@ -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.
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<p align="center">
|
||||
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
|
||||
</p>
|
||||
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
|
||||
<h3 align="center">多平台快速开发的UI框架</h3>
|
||||
|
||||
[](https://gitee.com/xuqu/uView/stargazers)
|
||||
[](https://gitee.com/xuqu/uView/members)
|
||||
[](https://github.com/YanxinNet/uView)
|
||||
[](https://github.com/YanxinNet/uView)
|
||||
[](https://github.com/YanxinNet/uView/issues)
|
||||
[](https://uviewui.com)
|
||||
[](https://gitee.com/xuqu/uView/releases)
|
||||
[](https://en.wikipedia.org/wiki/MIT_License)
|
||||
|
||||
## 说明
|
||||
|
||||
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
|
||||
|
||||
## [官方文档：https://www.uviewui.com](https://www.uviewui.com)
|
||||
|
||||
### [点击加群交流反馈：1084514613](https://jq.qq.com/?_wv=1027&k=uyZUkSlo)
|
||||
|
||||
## 特性
|
||||
|
||||
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
|
||||
- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
|
||||
- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
|
||||
- 众多的常用页面和布局，让您专注逻辑，事半功倍
|
||||
- 详尽的文档支持，现代化的演示效果
|
||||
- 按需引入，精简打包体积
|
||||
|
||||
|
||||
## 预览
|
||||
|
||||
您可以通过**微信**扫码，查看最佳的演示效果。
|
||||
<br>
|
||||
<br>
|
||||
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
|
||||
|
||||
|
||||
## 友情链接
|
||||
|
||||
#### **vue-admin-beautiful** —— [企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）](https://github.com/chuzhixin/vue-admin-beautiful)
|
||||
|
||||
#### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index)
|
||||
|
||||
#### **pl-table** —— [ 完美解决 element 万级表格数据渲染卡顿问题](https://github.com/livelyPeng/pl-table)
|
||||
|
||||
#### **luch-request** —— [基于 Promise 开发的 uni-app 跨平台、项目级别的请求库，它有更小的体积，易用的 api，方便简单的自定义能力](https://www.quanzhan.co/luch-request/)
|
||||
<br>
|
||||
|
||||
## 链接
|
||||
|
||||
- [官方文档](https://uviewui.com/)
|
||||
- [更新日志](https://uviewui.com/components/changelog.html)
|
||||
- [升级指南](https://uviewui.com/components/changelog.html)
|
||||
- [关于我们](https://uviewui.com/cooperation/about.html)
|
||||
|
||||
## 交流反馈
|
||||
|
||||
欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uviewui.com/components/addQQGroup.html)
|
||||
|
||||
## 安装
|
||||
|
||||
#### **下载地址** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
|
||||
|
||||
## 快速上手
|
||||
|
||||
1. `main.js`引入uView库
|
||||
```js
|
||||
// main.js
|
||||
import uView from 'uview-ui';
|
||||
Vue.use(uView);
|
||||
```
|
||||
|
||||
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
|
||||
```css
|
||||
/* App.vue */
|
||||
<style lang="scss">
|
||||
/* 注意声明lang="scss"！ */
|
||||
@import "uview-ui/index.scss";
|
||||
</style>
|
||||
```
|
||||
|
||||
3. `uni.scss`引入全局scss变量文件
|
||||
```css
|
||||
/* uni.scss */
|
||||
@import "uview-ui/theme.scss";
|
||||
```
|
||||
|
||||
4. `pages.json`配置easycom规则(按需引入)
|
||||
|
||||
```js
|
||||
// pages.json
|
||||
{
|
||||
"easycom": {
|
||||
// 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
|
||||
// 下载安装方式
|
||||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
|
||||
// npm安装方式
|
||||
// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
// 此为本身已有的内容
|
||||
"pages": [
|
||||
// ......
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
|
||||
|
||||
## 使用方法
|
||||
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<u-button>按钮</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
|
||||
|
||||
|
||||
## 捐赠uView的研发
|
||||
|
||||
uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
|
||||
|
||||
<img src="https://uviewui.com/common/wechat.png" width="220" >
|
||||
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
|
||||
|
||||
## 版权信息
|
||||
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。
|
||||
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,32 @@
|
|||
// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
|
||||
let hotSearchUrl = '/ebapi/store_api/hot_search';
|
||||
let indexUrl = '/ebapi/public_api/index';
|
||||
|
||||
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
|
||||
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
|
||||
const install = (Vue, vm) => {
|
||||
// 此处没有使用传入的params参数
|
||||
let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
|
||||
id: 2
|
||||
});
|
||||
// 此处使用了传入的params参数，一切自定义即可
|
||||
let getUserInfo = (params = {}) => vm.$u.get('/system/user/info/', params);//获取用户信息
|
||||
|
||||
let getCode = (params = {}) => vm.$u.post('/system/sendmsg/', params); //获取邮箱验证码
|
||||
|
||||
let codeLogin = (params = {}) => vm.$u.post('/token2/', params); //邮箱验证码登录
|
||||
|
||||
let login = (params = {}) => vm.$u.post('/token/', params); //账户密码登录
|
||||
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
|
||||
|
||||
let getMyInspectTask = (params = {}) => vm.$u.get('/quality/subinspecttask/self/', params);
|
||||
vm.$u.api = {getUserInfo,
|
||||
getCode,
|
||||
codeLogin,
|
||||
login,
|
||||
getMyInspectTask};
|
||||
}
|
||||
|
||||
export default {
|
||||
install
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
|
||||
// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
|
||||
const install = (Vue, vm) => {
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'https://api.youzixy.com',
|
||||
baseUrl: 'http://10.0.11.127:8000/api',
|
||||
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
|
||||
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
|
||||
// originalData: true,
|
||||
// 设置自定义头部content-type
|
||||
// header: {
|
||||
// 'content-type': 'xxx'
|
||||
// }
|
||||
showLoading: false,
|
||||
loadingText: '请求中..',
|
||||
originalData: true,
|
||||
loadingTime: 800,
|
||||
loadingMask: true
|
||||
});
|
||||
// 请求拦截，配置Token等参数
|
||||
Vue.prototype.$u.http.interceptor.request = (config) => {
|
||||
config.header.Authorization = 'Bearer ' + vm.vuex_token;
|
||||
|
||||
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
|
||||
// config.header.token = vm.token;
|
||||
|
||||
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
|
||||
// config.header.token = vm.$store.state.token;
|
||||
|
||||
// 方式三，如果token放在了globalData，通过getApp().globalData获取
|
||||
// config.header.token = getApp().globalData.username;
|
||||
|
||||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的，所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
||||
// const token = uni.getStorageSync('token');
|
||||
// config.header.token = token;
|
||||
|
||||
return config;
|
||||
}
|
||||
// 响应拦截，判断状态码是否通过
|
||||
Vue.prototype.$u.http.interceptor.response = (response) => {
|
||||
// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
|
||||
// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
|
||||
const res = response.data
|
||||
if( res.code >= 200 && res.code < 300 ) {
|
||||
// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
|
||||
return res;
|
||||
}
|
||||
else if(res.code === 401){
|
||||
vm.$u.toast('验证失败，请重新登录');
|
||||
setTimeout(() => {
|
||||
// 此为uView的方法，详见路由相关文档
|
||||
vm.$u.route('/pages/login/login')
|
||||
}, 1500)
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
vm.$u.toast(res.msg);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
install
|
||||
}
|
||||
|
|
@ -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"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export default {
|
||||
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
|
||||
components: {
|
||||
desc: 'Numerous components cover the various requirements of the development process, and the components are rich in functions and compatible with multiple terminals. Let you integrate quickly, out of the box'
|
||||
},
|
||||
js: {
|
||||
desc: 'Numerous intimate gadgets are a weapon that you can call upon during the development process, allowing you to dart in your hand and pierce the Yang with a hundred steps'
|
||||
},
|
||||
template: {
|
||||
desc: 'Collection of many commonly used pages and layouts, reducing the repetitive work of developers, allowing you to focus on logic and get twice the result with half the effort'
|
||||
},
|
||||
nav: {
|
||||
components: 'Components',
|
||||
js: 'JS',
|
||||
template: 'Template'
|
||||
},
|
||||
common: {
|
||||
intro: 'UI framework for rapid development of multiple platforms',
|
||||
title: 'uView UI',
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export default {
|
||||
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
|
||||
components: {
|
||||
desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用'
|
||||
},
|
||||
js: {
|
||||
desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
|
||||
},
|
||||
template: {
|
||||
desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
|
||||
},
|
||||
nav: {
|
||||
components: '组件',
|
||||
js: '工具',
|
||||
template: '模板'
|
||||
},
|
||||
common: {
|
||||
intro: '多平台快速开发的UI框架',
|
||||
title: 'uView UI',
|
||||
},
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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,64 @@
|
|||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
App.mpType = 'app';
|
||||
|
||||
// 此处为演示Vue.prototype使用，非uView的功能部分
|
||||
Vue.prototype.vuePrototype = '枣红';
|
||||
|
||||
// 引入全局uView
|
||||
import uView from 'uview-ui';
|
||||
Vue.use(uView);
|
||||
|
||||
// 此处为演示vuex使用，非uView的功能部分
|
||||
import store from '@/store';
|
||||
|
||||
// 引入uView提供的对vuex的简写法文件
|
||||
let vuexStore = require('@/store/$u.mixin.js');
|
||||
Vue.mixin(vuexStore);
|
||||
|
||||
// 引入uView对小程序分享的mixin封装
|
||||
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
|
||||
Vue.mixin(mpShare);
|
||||
|
||||
// i18n部分的配置
|
||||
// 引入语言包，注意路径
|
||||
import Chinese from '@/common/locales/zh.js';
|
||||
import English from '@/common/locales/en.js';
|
||||
|
||||
// VueI18n
|
||||
import VueI18n from '@/common/vue-i18n.min.js';
|
||||
|
||||
// VueI18n
|
||||
Vue.use(VueI18n);
|
||||
|
||||
const i18n = new VueI18n({
|
||||
// 默认语言
|
||||
locale: 'zh',
|
||||
// 引入语言文件
|
||||
messages: {
|
||||
'zh': Chinese,
|
||||
'en': English,
|
||||
}
|
||||
});
|
||||
|
||||
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
|
||||
Vue.prototype._i18n = i18n;
|
||||
|
||||
const app = new Vue({
|
||||
i18n,
|
||||
store,
|
||||
...App
|
||||
});
|
||||
|
||||
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
|
||||
import httpInterceptor from '@/common/http.interceptor.js';
|
||||
Vue.use(httpInterceptor, app);
|
||||
|
||||
// http接口API抽离，免于写url或者一些固定的参数
|
||||
import httpApi from '@/common/http.api.js';
|
||||
Vue.use(httpApi, app);
|
||||
|
||||
app.$mount();
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
{
|
||||
"name" : "共享平台",
|
||||
"appid" : "__UNI__B00D419",
|
||||
"description" : "共享平台",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {
|
||||
"OAuth" : {},
|
||||
"Payment" : {},
|
||||
"Push" : {},
|
||||
"Share" : {},
|
||||
"Speech" : {},
|
||||
"VideoPlayer" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"UIBackgroundModes" : [ "audio" ]
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"speech" : {
|
||||
"ifly" : {}
|
||||
}
|
||||
},
|
||||
"orientation" : [ "portrait-primary" ]
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx126bdbf0c683c357",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"h5" : {
|
||||
"template" : "template.h5.html",
|
||||
"router" : {
|
||||
"mode" : "history",
|
||||
"base" : "/h5/"
|
||||
},
|
||||
"title" : "共享平台"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"id": "uView-UI",
|
||||
"name": "uView UI已发布Sketch和Axure设计资源",
|
||||
"version": "1.8.4",
|
||||
"description": "uView正在研发2.0版本，将会全面兼容Nvue，并引入大量激动人心的创新功能",
|
||||
"keywords": [
|
||||
"uView",
|
||||
"uViewUI",
|
||||
"UI",
|
||||
"UI框架",
|
||||
"uni-app"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,912 @@
|
|||
{
|
||||
"easycom": {
|
||||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
// "condition": { //模式配置，仅开发期间生效
|
||||
// "current": 0, //当前激活的模式(list 的索引项)
|
||||
// "list": [{
|
||||
// "name": "test", //模式名称
|
||||
// "path": "pages/componentsC/test/index", //启动页面，必选
|
||||
// "query": "uuid=c4bba940-f69e-11ea-a419-6bafda9d095e&__id__=1" //启动参数，在页面的onLoad函数里面得到
|
||||
// }]
|
||||
// },
|
||||
"pages": [
|
||||
{
|
||||
"path" : "pages/home/home",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "主页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},
|
||||
// 演示-组件
|
||||
{
|
||||
"path": "pages/example/components",
|
||||
"style": {
|
||||
"navigationBarTitleText": "组件"
|
||||
}
|
||||
},
|
||||
// avatarCropper-头像裁剪
|
||||
{
|
||||
"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "头像裁剪",
|
||||
"navigationBarBackgroundColor": "#000000"
|
||||
}
|
||||
},
|
||||
// 演示-工具
|
||||
{
|
||||
"path": "pages/example/js",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工具"
|
||||
}
|
||||
},
|
||||
// 演示-模板
|
||||
{
|
||||
"path": "pages/example/template",
|
||||
"style": {
|
||||
"navigationBarTitleText": "模板"
|
||||
}
|
||||
},
|
||||
// fullScreen-压窗屏
|
||||
{
|
||||
"path": "uview-ui/components/u-full-screen/u-full-screen",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"animationType": "fade-in",
|
||||
"background": "transparent",
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"popGesture": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/my/my",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "个人中心",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/uview/uview",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/login/login",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "验证码登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/login/login_password",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "密码登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "pages/componentsC",
|
||||
"pages": [
|
||||
// test-测试
|
||||
{
|
||||
"path": "test/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Test"
|
||||
// "navigationStyle": "custom" ,// 隐藏系统导航栏
|
||||
// "navigationBarTextStyle": "white" // 状态栏字体为白色
|
||||
}
|
||||
},
|
||||
// gap-间隔槽
|
||||
{
|
||||
"path": "gap/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "gap-间隔槽"
|
||||
}
|
||||
},
|
||||
// subsection分段器
|
||||
{
|
||||
"path": "subsection/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "subsection-分段器"
|
||||
}
|
||||
},
|
||||
// section 查看更多
|
||||
{
|
||||
"path": "section/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "section-查看更多"
|
||||
}
|
||||
},
|
||||
// link链接
|
||||
{
|
||||
"path": "link/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "link-链接"
|
||||
}
|
||||
},
|
||||
// mask遮罩层
|
||||
{
|
||||
"path": "mask/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "mask-遮罩层"
|
||||
}
|
||||
},
|
||||
// countTo数字滚动
|
||||
{
|
||||
"path": "countTo/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "countTo-数字滚动"
|
||||
}
|
||||
},
|
||||
// color颜色
|
||||
{
|
||||
"path": "color/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "color-颜色"
|
||||
}
|
||||
},
|
||||
// countDown倒计时
|
||||
{
|
||||
"path": "countDown/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "countDown-倒计时"
|
||||
}
|
||||
},
|
||||
// progress进度条
|
||||
{
|
||||
"path": "progress/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "progress-进度条"
|
||||
}
|
||||
},
|
||||
// alertTips警告提示
|
||||
{
|
||||
"path": "alertTips/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "alertTips-警告提示"
|
||||
}
|
||||
},
|
||||
// badge 徽标数
|
||||
{
|
||||
"path": "badge/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "badge-徽标数"
|
||||
}
|
||||
},
|
||||
// button按钮
|
||||
{
|
||||
"path": "button/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "button-按钮"
|
||||
}
|
||||
},
|
||||
// collapse折叠面板
|
||||
{
|
||||
"path": "collapse/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "collapse-折叠面板"
|
||||
}
|
||||
},
|
||||
// actionSheet操作菜单
|
||||
{
|
||||
"path": "actionSheet/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "actionSheet-操作菜单"
|
||||
}
|
||||
},
|
||||
// messageInput验证码输入
|
||||
{
|
||||
"path": "messageInput/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "messageInput-验证码输入"
|
||||
}
|
||||
},
|
||||
// popup弹窗
|
||||
{
|
||||
"path": "popup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "popup-弹窗"
|
||||
}
|
||||
},
|
||||
// listCell
|
||||
{
|
||||
"path": "cell/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "listCell-列表"
|
||||
}
|
||||
},
|
||||
// numberBox数字输入框
|
||||
{
|
||||
"path": "numberBox/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "numberBox-步进器"
|
||||
}
|
||||
},
|
||||
// grid宫格布局
|
||||
{
|
||||
"path": "grid/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "grid-宫格布局"
|
||||
}
|
||||
},
|
||||
// layout栅格布局
|
||||
{
|
||||
"path": "layout/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "layout-栅格布局"
|
||||
}
|
||||
},
|
||||
// 加载更多
|
||||
{
|
||||
"path": "loadmore/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "loadmore-加载更多"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/template",
|
||||
"pages": [
|
||||
// wxCenter 仿微信个人中心
|
||||
{
|
||||
"path": "wxCenter/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "wxCenter 仿微信个人中心",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
// keyboardPay 自定义键盘支付
|
||||
{
|
||||
"path": "keyboardPay/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "keyboardPay 自定义键盘支付"
|
||||
}
|
||||
},
|
||||
// douyin 仿抖音
|
||||
// {
|
||||
// "path": "douyin/index",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "douyin 仿抖音"
|
||||
// }
|
||||
// },
|
||||
// mallMenu商城分类
|
||||
{
|
||||
"path": "mallMenu/index2",
|
||||
"style": {
|
||||
"navigationBarTitleText": "mallMenu-商城分类"
|
||||
}
|
||||
},
|
||||
// mallMenu商城分类
|
||||
{
|
||||
"path": "mallMenu/index1",
|
||||
"style": {
|
||||
"navigationBarTitleText": "mallMenu-商城分类"
|
||||
}
|
||||
},
|
||||
// coupon优惠券
|
||||
{
|
||||
"path": "coupon/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "coupon-优惠券"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "login/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "美团登录"
|
||||
}
|
||||
},
|
||||
// 城市选择
|
||||
{
|
||||
"path": "citySelect/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "城市选择"
|
||||
}
|
||||
},
|
||||
// SubmitBar提交订单栏
|
||||
{
|
||||
"path": "submitBar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交订单栏"
|
||||
}
|
||||
},
|
||||
// comment评论
|
||||
{
|
||||
"path": "comment/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "评论"
|
||||
}
|
||||
},
|
||||
// comment评论详情
|
||||
{
|
||||
"path": "comment/reply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "评论详情"
|
||||
}
|
||||
},
|
||||
// order订单
|
||||
{
|
||||
"path": "order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单"
|
||||
}
|
||||
},
|
||||
// login登录获取验证码
|
||||
{
|
||||
"path": "login/code",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录获取验证码"
|
||||
}
|
||||
},
|
||||
// address用户地址
|
||||
{
|
||||
"path": "address/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用户地址"
|
||||
}
|
||||
},
|
||||
// address添加用户地址
|
||||
{
|
||||
"path": "address/addSite",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加用户地址"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/library",
|
||||
"pages": [
|
||||
// debounce-节流防抖
|
||||
{
|
||||
"path": "debounce/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "throttle | debounce-节流防抖"
|
||||
}
|
||||
},
|
||||
// deepClone-对象深度克隆
|
||||
{
|
||||
"path": "deepClone/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "deepClone-对象深度克隆"
|
||||
}
|
||||
},
|
||||
// deepMerge-对象深度合并
|
||||
{
|
||||
"path": "deepMerge/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "deepMerge-对象深度合并"
|
||||
}
|
||||
},
|
||||
// getRect-元素节点
|
||||
{
|
||||
"path": "getRect/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "getRect-元素节点"
|
||||
}
|
||||
},
|
||||
// timeFrom-多久之前
|
||||
{
|
||||
"path": "timeFrom/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "timeFrom-多久之前"
|
||||
}
|
||||
},
|
||||
// globalData-全局变量
|
||||
{
|
||||
"path": "globalVariable/globalData",
|
||||
"style": {
|
||||
"navigationBarTitleText": "globalData-全局变量"
|
||||
}
|
||||
},
|
||||
// prototype-全局变量
|
||||
{
|
||||
"path": "globalVariable/prototype",
|
||||
"style": {
|
||||
"navigationBarTitleText": "prototype-全局变量"
|
||||
}
|
||||
},
|
||||
// vuex-全局变量
|
||||
{
|
||||
"path": "globalVariable/vuex",
|
||||
"style": {
|
||||
"navigationBarTitleText": "vuex-全局变量"
|
||||
}
|
||||
},
|
||||
// globalVariable-全局变量
|
||||
{
|
||||
"path": "globalVariable/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "globalVariable-全局变量"
|
||||
}
|
||||
},
|
||||
// http-请求
|
||||
{
|
||||
"path": "http/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "http-请求"
|
||||
}
|
||||
},
|
||||
// test-规则验证
|
||||
{
|
||||
"path": "test/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "test-规则验证"
|
||||
}
|
||||
},
|
||||
// mpShare-小程序分享
|
||||
{
|
||||
"path": "mpShare/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "mpShare-小程序分享"
|
||||
}
|
||||
},
|
||||
// color-JS调用颜色
|
||||
{
|
||||
"path": "color/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "color-JS调用颜色"
|
||||
}
|
||||
},
|
||||
// trim-去除空格
|
||||
{
|
||||
"path": "trim/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "trim-去除空格"
|
||||
}
|
||||
},
|
||||
// random-随机数生成
|
||||
{
|
||||
"path": "random/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "random-随机数生成"
|
||||
}
|
||||
},
|
||||
// md5加密
|
||||
{
|
||||
"path": "md5/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "md5-加密"
|
||||
}
|
||||
},
|
||||
// colorSwitch颜色转换
|
||||
{
|
||||
"path": "colorSwitch/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "colorSwitch-颜色转换"
|
||||
}
|
||||
},
|
||||
// randomArray数组乱序
|
||||
{
|
||||
"path": "randomArray/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "randomArray-数组乱序"
|
||||
}
|
||||
},
|
||||
// guid全局唯一标识符
|
||||
{
|
||||
"path": "guid/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "guid-全局唯一标识符"
|
||||
}
|
||||
},
|
||||
// timeFormat时间格式化
|
||||
{
|
||||
"path": "timeFormat/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "timeFormat-时间格式化"
|
||||
}
|
||||
}, // route-路由
|
||||
{
|
||||
"path": "route/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "route-路由"
|
||||
}
|
||||
},
|
||||
// route-路由跳转
|
||||
{
|
||||
"path": "route/routeTo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "route-路由跳转"
|
||||
}
|
||||
},
|
||||
// queryParams-对象转URL参数
|
||||
{
|
||||
"path": "queryParams/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "queryParams-对象转URL参数"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/componentsA",
|
||||
"pages": [
|
||||
// parse-富文本解析器
|
||||
{
|
||||
"path": "parse/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "parse-富文本解析器"
|
||||
}
|
||||
},
|
||||
// backTop-返回顶部
|
||||
{
|
||||
"path": "backTop/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "backTop-返回顶部"
|
||||
}
|
||||
},
|
||||
// calendar-日历
|
||||
{
|
||||
"path": "calendar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "calendar-日历"
|
||||
}
|
||||
},
|
||||
// form-表单
|
||||
{
|
||||
"path": "form/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "form-表单"
|
||||
}
|
||||
},
|
||||
// select-列选择器
|
||||
{
|
||||
"path": "select/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "select-列选择器"
|
||||
}
|
||||
},
|
||||
// slider-滑动选择器
|
||||
{
|
||||
"path": "slider/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "slider-滑动选择器"
|
||||
}
|
||||
},
|
||||
// fullScreen-压窗屏
|
||||
{
|
||||
"path": "fullScreen/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "fullScreen-压窗屏"
|
||||
}
|
||||
},
|
||||
// navbar-自定义导航栏
|
||||
{
|
||||
"path": "navbar/index",
|
||||
"style": {
|
||||
// "navigationBarTitleText": "navbar-自定义导航栏",
|
||||
"navigationStyle": "custom", // 隐藏系统导航栏
|
||||
"navigationBarTextStyle": "white" // 状态栏字体为白色
|
||||
}
|
||||
},
|
||||
// field-输入框
|
||||
{
|
||||
"path": "field/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "field-输入框"
|
||||
}
|
||||
},
|
||||
// modal-模态框
|
||||
{
|
||||
"path": "modal/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "modal-模态框"
|
||||
}
|
||||
},
|
||||
// indexList索引列表
|
||||
{
|
||||
"path": "indexList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "indexList-索引列表"
|
||||
}
|
||||
},
|
||||
// empty内容为空
|
||||
{
|
||||
"path": "empty/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "empty-内容为空"
|
||||
}
|
||||
},
|
||||
// avatarCropper-头像裁剪
|
||||
{
|
||||
"path": "avatarCropper/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "avatarCropper-头像裁剪"
|
||||
}
|
||||
}, // noNetwork没有网络
|
||||
{
|
||||
"path": "noNetwork/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "noNetwork-没有网络"
|
||||
}
|
||||
}, // icon字体图标
|
||||
{
|
||||
"path": "icon/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "icon-字体图标"
|
||||
}
|
||||
}, // avatar-用户头像展示
|
||||
{
|
||||
"path": "avatar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "avatar-用户头像展示"
|
||||
}
|
||||
}, // keyboard键盘
|
||||
{
|
||||
"path": "keyboard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "keyboard-键盘"
|
||||
}
|
||||
}, // 图片懒加载
|
||||
{
|
||||
"path": "lazyLoad/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "lazyLoad-懒加载"
|
||||
}
|
||||
},
|
||||
// tabs切换
|
||||
{
|
||||
"path": "tabs/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Tabs-切换"
|
||||
}
|
||||
},
|
||||
// tag标签
|
||||
{
|
||||
"path": "tag/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "tag-标签"
|
||||
}
|
||||
},
|
||||
// timeLine时间轴
|
||||
{
|
||||
"path": "timeLine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "timeLine-时间轴"
|
||||
}
|
||||
},
|
||||
// toast轻提示
|
||||
{
|
||||
"path": "toast/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "toast-轻提示"
|
||||
}
|
||||
},
|
||||
// topTips消息提示
|
||||
{
|
||||
"path": "topTips/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "topTips-消息提示"
|
||||
}
|
||||
},
|
||||
// Code-验证码倒计时
|
||||
{
|
||||
"path": "verificationCode/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Code-验证码倒计时"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/componentsB",
|
||||
"pages": [
|
||||
// dropdown-下拉菜单
|
||||
{
|
||||
"path": "dropdown/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "dropdown-下拉菜单"
|
||||
}
|
||||
},
|
||||
// tabbar-底部导航栏
|
||||
{
|
||||
"path": "tabbar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "tabbar-底部导航栏"
|
||||
}
|
||||
},
|
||||
// line-线条
|
||||
{
|
||||
"path": "line/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "line-线条"
|
||||
}
|
||||
},
|
||||
// image-图片
|
||||
{
|
||||
"path": "image/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "image-图片"
|
||||
}
|
||||
},
|
||||
// card-卡片
|
||||
{
|
||||
"path": "card/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "card-卡片"
|
||||
}
|
||||
},
|
||||
// divider-分割线
|
||||
{
|
||||
"path": "divider/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "divider-分割线"
|
||||
}
|
||||
},
|
||||
// picker选择器
|
||||
{
|
||||
"path": "picker/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "picker-选择器"
|
||||
}
|
||||
}, // noticeBar通告栏
|
||||
{
|
||||
"path": "noticeBar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "noticeBar-通告栏"
|
||||
}
|
||||
},
|
||||
// checkbox-复选框
|
||||
{
|
||||
"path": "checkbox/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "checkbox-复选框"
|
||||
}
|
||||
},
|
||||
// radio-单选框
|
||||
{
|
||||
"path": "radio/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "radio-单选框"
|
||||
}
|
||||
},
|
||||
// loading-加载动画
|
||||
{
|
||||
"path": "loading/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "loading-加载动画"
|
||||
}
|
||||
},
|
||||
// switch-开关选择器
|
||||
{
|
||||
"path": "switch/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "switch-开关选择器"
|
||||
}
|
||||
},
|
||||
// 骨架屏
|
||||
{
|
||||
"path": "skeleton/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "skeleton-骨架屏"
|
||||
}
|
||||
}, // upload上传
|
||||
{
|
||||
"path": "upload/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "upload-上传"
|
||||
}
|
||||
},
|
||||
// waterfall瀑布流
|
||||
// #ifndef MP-TOUTIAO
|
||||
{
|
||||
"path": "waterfall/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "waterfall-瀑布流"
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
// table表格
|
||||
{
|
||||
"path": "table/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "table-表格"
|
||||
}
|
||||
},
|
||||
// rate评分
|
||||
{
|
||||
"path": "rate/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "rate-评分"
|
||||
}
|
||||
},
|
||||
// readMore显示更多
|
||||
{
|
||||
"path": "readMore/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "readMore-查看更多"
|
||||
}
|
||||
},
|
||||
// search搜索框
|
||||
{
|
||||
"path": "search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "search-搜索框"
|
||||
}
|
||||
},
|
||||
// steps步骤条
|
||||
{
|
||||
"path": "steps/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "steps-步骤条"
|
||||
}
|
||||
},
|
||||
// sticky吸顶
|
||||
{
|
||||
"path": "sticky/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "sticky-吸顶"
|
||||
}
|
||||
},
|
||||
// swiper轮播图
|
||||
{
|
||||
"path": "swiper/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "swiper-轮播图"
|
||||
}
|
||||
},
|
||||
// swipeAction-左滑删除
|
||||
{
|
||||
"path": "swipeAction/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "swipeAction-左滑删除"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"preloadRule": {
|
||||
"pages/example/components": {
|
||||
"network": "all",
|
||||
"packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
|
||||
}
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uView",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#909399",
|
||||
"selectedColor": "#303133",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderStyle": "black",
|
||||
"list": [{
|
||||
"pagePath": "pages/home/home",
|
||||
"iconPath": "static/common/home.png",
|
||||
"selectedIconPath": "static/common/homec.png",
|
||||
"text": "主页"
|
||||
},
|
||||
// {
|
||||
// "pagePath": "pages/uview/uview",
|
||||
// "iconPath": "static/uview/example/js.png",
|
||||
// "selectedIconPath": "static/uview/example/js_select.png",
|
||||
// "text": "uview"
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/my/my",
|
||||
"iconPath": "static/common/me.png",
|
||||
"selectedIconPath": "static/common/mec.png",
|
||||
"text": "个人中心"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -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,110 @@
|
|||
<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-avatar-wrap">
|
||||
<image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<u-button @click="chooseAvatar">选择图片</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="['0.3', '0.7', '1']" @change="qualityChange"></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 {
|
||||
avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
uni.$on('uAvatarCropper', path => {
|
||||
this.avatar = path;
|
||||
// 可以在此上传到服务端
|
||||
// uni.uploadFile({
|
||||
// url: 'http://192.168.100.17/index.php/index/index/upload',
|
||||
// filePath: path,
|
||||
// name: 'file',
|
||||
// complete: (res) => {
|
||||
// console.log(res);
|
||||
// }
|
||||
// });
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
chooseAvatar() {
|
||||
this.$u.route({
|
||||
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
|
||||
params: {
|
||||
// 输出图片宽度，高等于宽，单位px
|
||||
destWidth: 300,
|
||||
// 裁剪框宽度，高等于宽，单位px
|
||||
rectWidth: 200,
|
||||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||||
fileType: 'jpg',
|
||||
}
|
||||
})
|
||||
},
|
||||
qualityChange(index) {
|
||||
this.quality = index == 0 ? 0.3 : index == 1 ? 0.7 : 1;
|
||||
},
|
||||
styleChange(index) {
|
||||
if (index == 0) {
|
||||
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 200;
|
||||
this.boundStyle = {
|
||||
lineWidth: 8,
|
||||
borderColor: this.$u.color['error'],
|
||||
mask: 'rgba(0, 0, 0, 0.8)'
|
||||
}
|
||||
} else {
|
||||
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 400;
|
||||
this.boundStyle = {
|
||||
lineWidth: 4,
|
||||
borderColor: 'rgb(245, 245, 245)',
|
||||
mask: 'rgba(0, 0, 0, 0.35)'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
preAvatar() {
|
||||
wx.previewImage({
|
||||
current: '', // 当前显示图片的 http 链接
|
||||
urls: [this.avatar] // 需要预览的图片 http 链接列表
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.u-avatar-wrap {
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.u-avatar-demo {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
</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,454 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
|
||||
<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120" :label-position="labelPosition" label="姓名" prop="name">
|
||||
<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="性别" prop="sex">
|
||||
<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="简介" prop="intro">
|
||||
<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.intro" />
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="密码" prop="password">
|
||||
<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="rePassword">
|
||||
<u-input :border="border" type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="水果品种" label-width="150" prop="likeFruit">
|
||||
<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
|
||||
<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-position="labelPosition" label="结算方式" prop="payType" label-width="150">
|
||||
<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
|
||||
<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
|
||||
</u-radio-group>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="150">
|
||||
<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="商品类型" prop="goodsType" label-width="150">
|
||||
<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择商品类型" @click="selectShow = true"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
|
||||
<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
|
||||
<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
|
||||
<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
|
||||
</u-form-item>
|
||||
<!-- 此处switch的slot为right，如果不填写slot名，也即<u-switch v-model="model.remember"></u-switch>，将会左对齐 -->
|
||||
<u-form-item :label-position="labelPosition" label="记住密码" prop="remember" label-width="150">
|
||||
<u-switch v-model="model.remember" slot="right"></u-switch>
|
||||
</u-form-item>
|
||||
<u-form-item :label-position="labelPosition" label="上传图片" prop="photo" label-width="150">
|
||||
<u-upload width="160" height="160"></u-upload>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="agreement">
|
||||
<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
|
||||
<view class="agreement-text">
|
||||
勾选代表同意uView的版权协议
|
||||
</view>
|
||||
</view>
|
||||
<u-button @click="submit">提交</u-button>
|
||||
<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
|
||||
<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
|
||||
<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
|
||||
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
|
||||
<view class="u-config-wrap">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">label对齐方式</view>
|
||||
<u-subsection :list="['左边', '上方']" @change="labelPositionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">边框</view>
|
||||
<u-subsection :current="borderCurrent" :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">radio、checkbox样式</view>
|
||||
<u-subsection :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">错误提示方式</view>
|
||||
<u-subsection :list="['message', 'toast', '下划线', '输入框']" @change="errorChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
model: {
|
||||
name: '',
|
||||
sex: '',
|
||||
likeFruit: '',
|
||||
intro: '',
|
||||
payType: '支付宝',
|
||||
agreement: false,
|
||||
region: '',
|
||||
goodsType: '',
|
||||
phone: '',
|
||||
code: '',
|
||||
password: '',
|
||||
rePassword: '',
|
||||
remember: false,
|
||||
photo: ''
|
||||
},
|
||||
selectList: [
|
||||
{
|
||||
value: '电子产品',
|
||||
label: '电子产品'
|
||||
},
|
||||
{
|
||||
value: '服装',
|
||||
label: '服装'
|
||||
},
|
||||
{
|
||||
value: '工艺品',
|
||||
label: '工艺品'
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur' ,
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '姓名长度在3到5个字符',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
return this.$u.test.chinese(value);
|
||||
},
|
||||
message: '姓名必须为中文',
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
|
||||
// {
|
||||
// trigger: ['blur'],
|
||||
// // 异步验证需要通过调用callback()，并且在里面抛出new Error()
|
||||
// // 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
|
||||
// asyncValidator: (rule, value, callback) => {
|
||||
// this.$u.post('/ebapi/public_api/index').then(res => {
|
||||
// // 如果验证出错，需要在callback()抛出new Error('错误提示信息')
|
||||
// if(res.error) {
|
||||
// callback(new Error('姓名重复'));
|
||||
// } else {
|
||||
// // 如果没有错误，也要执行callback()回调
|
||||
// callback();
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// }
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change'
|
||||
},
|
||||
],
|
||||
intro: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写简介'
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
message: '简介不能少于5个字',
|
||||
trigger: 'change' ,
|
||||
},
|
||||
// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
|
||||
{
|
||||
pattern: /^[\u4e00-\u9fa5]+$/gi,
|
||||
message: '简介只能为中文',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
likeFruit: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择您喜欢的水果',
|
||||
trigger: 'change',
|
||||
type: 'array',
|
||||
}
|
||||
],
|
||||
payType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择任意一种支付方式',
|
||||
trigger: 'change',
|
||||
}
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择地区',
|
||||
trigger: 'change',
|
||||
}
|
||||
],
|
||||
goodsType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择商品类型',
|
||||
trigger: 'change',
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
return this.$u.test.mobile(value);
|
||||
},
|
||||
message: '手机号码不正确',
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
message: '验证码只能为数字',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
// 正则不能含有两边的引号
|
||||
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
|
||||
message: '需同时含有字母和数字，长度在6-12之间',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
rePassword: [
|
||||
{
|
||||
required: true,
|
||||
message: '请重新输入密码',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
return value === this.model.password;
|
||||
},
|
||||
message: '两次输入的密码不相等',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
},
|
||||
border: false,
|
||||
check: false,
|
||||
selectStatus: 'close',
|
||||
checkboxList: [
|
||||
{
|
||||
name: '荔枝',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '橙子',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '草莓',
|
||||
checked: false,
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
radioList: [
|
||||
{
|
||||
name: '支付宝',
|
||||
checked: true,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '微信',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '银联',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '现金',
|
||||
checked: false,
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
radio: '支付宝',
|
||||
actionSheetList: [
|
||||
{
|
||||
text: '男'
|
||||
},
|
||||
{
|
||||
text: '女'
|
||||
},
|
||||
{
|
||||
text: '保密'
|
||||
}
|
||||
],
|
||||
actionSheetShow: false,
|
||||
pickerShow: false,
|
||||
selectShow: false,
|
||||
radioCheckWidth: 'auto',
|
||||
radioCheckWrap: false,
|
||||
labelPosition: 'left',
|
||||
codeTips: '',
|
||||
errorType: ['message'],
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
borderCurrent() {
|
||||
return this.border ? 0 : 1;
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.uForm.validate(valid => {
|
||||
if (valid) {
|
||||
if(!this.model.agreement) return this.$u.toast('请勾选协议');
|
||||
console.log('验证通过');
|
||||
} else {
|
||||
console.log('验证失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击actionSheet回调
|
||||
actionSheetCallback(index) {
|
||||
uni.hideKeyboard();
|
||||
this.model.sex = this.actionSheetList[index].text;
|
||||
},
|
||||
// checkbox选择发生变化
|
||||
checkboxGroupChange(e) {
|
||||
this.model.likeFruit = e;
|
||||
},
|
||||
// radio选择发生变化
|
||||
radioGroupChange(e) {
|
||||
this.model.payType = e;
|
||||
},
|
||||
// 勾选版权协议
|
||||
checkboxChange(e) {
|
||||
this.model.agreement = e.value;
|
||||
},
|
||||
// 选择地区回调
|
||||
regionConfirm(e) {
|
||||
this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
||||
},
|
||||
// 选择商品类型回调
|
||||
selectConfirm(e) {
|
||||
this.model.goodsType = '';
|
||||
e.map((val, index) => {
|
||||
this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
|
||||
})
|
||||
},
|
||||
borderChange(index) {
|
||||
this.border = !index;
|
||||
},
|
||||
radioCheckboxChange(index) {
|
||||
if(index == 0) {
|
||||
this.radioCheckWrap = false;
|
||||
this.radioCheckWidth = 'auto';
|
||||
} else if(index == 1) {
|
||||
this.radioCheckWrap = true;
|
||||
this.radioCheckWidth = 'auto';
|
||||
} else if(index == 2) {
|
||||
this.radioCheckWrap = false;
|
||||
this.radioCheckWidth = '50%';
|
||||
}
|
||||
},
|
||||
labelPositionChange(index) {
|
||||
this.labelPosition = index == 0 ? 'left' : 'top';
|
||||
},
|
||||
codeChange(text) {
|
||||
this.codeTips = text;
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码',
|
||||
mask: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
errorChange(index) {
|
||||
if(index == 0) this.errorType = ['message'];
|
||||
if(index == 1) this.errorType = ['toast'];
|
||||
if(index == 2) this.errorType = ['border-bottom'];
|
||||
if(index == 3) this.errorType = ['border'];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrap {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 40rpx 0;
|
||||
|
||||
.agreement-text {
|
||||
padding-left: 8rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<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">
|
||||
通过压窗屏打开的模态框，可以遮盖顶部原生的导航栏和底部tabbar栏。
|
||||
注意：压窗屏只对APP有效，其他端无效。
|
||||
</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="current" :list="['打开', '关闭']" @change="openModal"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$nextTick(() => {
|
||||
this.current = 1;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
openModal(index) {
|
||||
// 可以传递参数
|
||||
if(index == 0) {
|
||||
this.$u.route("/uview-ui/components/u-full-screen/u-full-screen?id=1");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,652 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<view class="u-border-left u-border-top inner-wrap">
|
||||
<view @tap="selectIcon(item.name)" class="u-icon-item u-border-bottom u-border-right" v-for="(item, index) in iconList" :key="index">
|
||||
<u-icon :name="item.name" size="40" color="#909399"></u-icon>
|
||||
<text class="u-icon-name">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iconList: [
|
||||
{
|
||||
name: 'level'
|
||||
},
|
||||
{
|
||||
name: 'woman'
|
||||
},
|
||||
{
|
||||
name: 'man'
|
||||
},
|
||||
{
|
||||
name: 'arrow-left-double'
|
||||
},
|
||||
{
|
||||
name: 'arrow-right-double'
|
||||
},
|
||||
{
|
||||
name: 'chat'
|
||||
},
|
||||
{
|
||||
name: 'chat-fill'
|
||||
},
|
||||
{
|
||||
name: 'red-packet'
|
||||
},
|
||||
{
|
||||
name: 'red-packet-fill'
|
||||
},
|
||||
{
|
||||
name: 'order'
|
||||
},
|
||||
{
|
||||
name: 'checkbox-mark'
|
||||
},
|
||||
{
|
||||
name: 'arrow-up-fill'
|
||||
},
|
||||
{
|
||||
name: 'arrow-down-fill'
|
||||
},
|
||||
{
|
||||
name: 'backspace'
|
||||
},
|
||||
{
|
||||
name: 'photo'
|
||||
},
|
||||
{
|
||||
name: 'photo-fill'
|
||||
},
|
||||
{
|
||||
name: 'lock'
|
||||
},
|
||||
{
|
||||
name: 'lock-fill'
|
||||
},
|
||||
{
|
||||
name: 'lock-open'
|
||||
},
|
||||
{
|
||||
name: 'lock-opened-fill'
|
||||
},
|
||||
{
|
||||
name: 'hourglass'
|
||||
},
|
||||
{
|
||||
name: 'hourglass-half-fill'
|
||||
},
|
||||
{
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
name: 'home-fill'
|
||||
},
|
||||
{
|
||||
name: 'fingerprint'
|
||||
},
|
||||
{
|
||||
name: 'cut'
|
||||
},
|
||||
{
|
||||
name: 'star'
|
||||
},
|
||||
{
|
||||
name: 'star-fill'
|
||||
},
|
||||
{
|
||||
name: 'share'
|
||||
},
|
||||
{
|
||||
name: 'share-fill'
|
||||
},
|
||||
{
|
||||
name: 'volume-up'
|
||||
},
|
||||
{
|
||||
name: 'volume-up-fill'
|
||||
},
|
||||
{
|
||||
name: 'volume-off'
|
||||
},
|
||||
{
|
||||
name: 'volume-off-fill'
|
||||
},
|
||||
{
|
||||
name: 'trash'
|
||||
},
|
||||
{
|
||||
name: 'trash-fill'
|
||||
},
|
||||
{
|
||||
name: 'rewind-right'
|
||||
},
|
||||
{
|
||||
name: 'rewind-right-fill'
|
||||
},
|
||||
{
|
||||
name: 'rewind-left'
|
||||
},
|
||||
{
|
||||
name: 'rewind-left-fill'
|
||||
},
|
||||
{
|
||||
name: 'shopping-cart'
|
||||
},
|
||||
{
|
||||
name: 'shopping-cart-fill'
|
||||
},
|
||||
{
|
||||
name: 'question'
|
||||
},
|
||||
{
|
||||
name: 'question-circle'
|
||||
},
|
||||
{
|
||||
name: 'question-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'plus'
|
||||
},
|
||||
{
|
||||
name: 'plus-circle'
|
||||
},
|
||||
{
|
||||
name: 'plus-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'tags'
|
||||
},
|
||||
{
|
||||
name: 'tags-fill'
|
||||
},
|
||||
{
|
||||
name: 'pause'
|
||||
},
|
||||
{
|
||||
name: 'pause-circle'
|
||||
},
|
||||
{
|
||||
name: 'pause-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'play-circle'
|
||||
},
|
||||
{
|
||||
name: 'play-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'map'
|
||||
},
|
||||
{
|
||||
name: 'map-fill'
|
||||
},
|
||||
{
|
||||
name: 'phone'
|
||||
},
|
||||
{
|
||||
name: 'phone-fill'
|
||||
},
|
||||
{
|
||||
name: 'list'
|
||||
},
|
||||
{
|
||||
name: 'list-dot'
|
||||
},
|
||||
{
|
||||
name: 'man-delete'
|
||||
},
|
||||
{
|
||||
name: 'man-add'
|
||||
},
|
||||
{
|
||||
name: 'man-add-fill'
|
||||
},
|
||||
{
|
||||
name: 'person-delete-fill'
|
||||
},
|
||||
{
|
||||
name: 'info'
|
||||
},
|
||||
{
|
||||
name: 'info-circle'
|
||||
},
|
||||
{
|
||||
name: 'info-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'minus'
|
||||
},
|
||||
{
|
||||
name: 'minus-circle'
|
||||
},
|
||||
{
|
||||
name: 'minus-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'mic'
|
||||
},
|
||||
{
|
||||
name: 'mic-off'
|
||||
},
|
||||
{
|
||||
name: 'grid'
|
||||
},
|
||||
{
|
||||
name: 'grid-fill'
|
||||
},
|
||||
{
|
||||
name: 'eye'
|
||||
},
|
||||
{
|
||||
name: 'eye-fill'
|
||||
},
|
||||
{
|
||||
name: 'eye-off'
|
||||
},
|
||||
{
|
||||
name: 'file-text'
|
||||
},
|
||||
{
|
||||
name: 'file-text-fill'
|
||||
},
|
||||
{
|
||||
name: 'edit-pen'
|
||||
},
|
||||
{
|
||||
name: 'edit-pen-fill'
|
||||
},
|
||||
{
|
||||
name: 'email'
|
||||
},
|
||||
{
|
||||
name: 'email-fill'
|
||||
},
|
||||
{
|
||||
name: 'download'
|
||||
},
|
||||
{
|
||||
name: 'checkmark'
|
||||
},
|
||||
{
|
||||
name: 'checkmark-circle'
|
||||
},
|
||||
{
|
||||
name: 'checkmark-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'clock'
|
||||
},
|
||||
{
|
||||
name: 'clock-fill'
|
||||
},
|
||||
{
|
||||
name: 'close'
|
||||
},
|
||||
{
|
||||
name: 'close-circle'
|
||||
},
|
||||
{
|
||||
name: 'close-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'calendar'
|
||||
},
|
||||
{
|
||||
name: 'calendar-fill'
|
||||
},
|
||||
{
|
||||
name: 'car'
|
||||
},
|
||||
{
|
||||
name: 'car-fill'
|
||||
},
|
||||
{
|
||||
name: 'bell'
|
||||
},
|
||||
{
|
||||
name: 'bell-fill'
|
||||
},
|
||||
{
|
||||
name: 'bookmark'
|
||||
},
|
||||
{
|
||||
name: 'bookmark-fill'
|
||||
},
|
||||
{
|
||||
name: 'attach'
|
||||
},
|
||||
{
|
||||
name: 'play-right'
|
||||
},
|
||||
{
|
||||
name: 'play-right-fill'
|
||||
},
|
||||
{
|
||||
name: 'play-left'
|
||||
},
|
||||
{
|
||||
name: 'play-left-fill'
|
||||
},
|
||||
{
|
||||
name: 'error'
|
||||
},
|
||||
{
|
||||
name: 'error-circle'
|
||||
},
|
||||
{
|
||||
name: 'error-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'wifi'
|
||||
},
|
||||
{
|
||||
name: 'wifi-off'
|
||||
},
|
||||
{
|
||||
name: 'skip-back-left'
|
||||
},
|
||||
{
|
||||
name: 'skip-forward-right'
|
||||
},
|
||||
{
|
||||
name: 'search'
|
||||
},
|
||||
{
|
||||
name: 'setting'
|
||||
},
|
||||
{
|
||||
name: 'setting-fill'
|
||||
},
|
||||
{
|
||||
name: 'volume'
|
||||
},
|
||||
{
|
||||
name: 'volume-fill'
|
||||
},
|
||||
{
|
||||
name: 'more-dot-fill'
|
||||
},
|
||||
{
|
||||
name: 'more-circle'
|
||||
},
|
||||
{
|
||||
name: 'more-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'bag'
|
||||
},
|
||||
{
|
||||
name: 'bag-fill'
|
||||
},
|
||||
{
|
||||
name: 'arrow-upward'
|
||||
},
|
||||
{
|
||||
name: 'arrow-downward'
|
||||
},
|
||||
{
|
||||
name: 'arrow-leftward'
|
||||
},
|
||||
{
|
||||
name: 'arrow-rightward'
|
||||
},
|
||||
{
|
||||
name: 'arrow-up'
|
||||
},
|
||||
{
|
||||
name: 'arrow-down'
|
||||
},
|
||||
{
|
||||
name: 'arrow-left'
|
||||
},
|
||||
{
|
||||
name: 'arrow-right'
|
||||
},
|
||||
{
|
||||
name: 'rmb'
|
||||
},
|
||||
{
|
||||
name: 'rmb-circle'
|
||||
},
|
||||
{
|
||||
name: 'rmb-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'thumb-up'
|
||||
},
|
||||
{
|
||||
name: 'thumb-up-fill'
|
||||
},
|
||||
{
|
||||
name: 'thumb-down'
|
||||
},
|
||||
{
|
||||
name: 'thumb-down-fill'
|
||||
},
|
||||
{
|
||||
name: 'coupon'
|
||||
},
|
||||
{
|
||||
name: 'coupon-fill'
|
||||
},
|
||||
{
|
||||
name: 'kefu-ermai'
|
||||
},
|
||||
{
|
||||
name: 'server-fill'
|
||||
},
|
||||
{
|
||||
name: 'server-man'
|
||||
},
|
||||
{
|
||||
name: 'scan'
|
||||
},
|
||||
{
|
||||
name: 'warning'
|
||||
},
|
||||
{
|
||||
name: 'warning-fill'
|
||||
},
|
||||
{
|
||||
name: 'google'
|
||||
},
|
||||
{
|
||||
name: 'google-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'chrome-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'ie'
|
||||
},
|
||||
{
|
||||
name: 'IE-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'github-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'android-fill'
|
||||
},
|
||||
{
|
||||
name: 'android-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'apple-fill'
|
||||
},
|
||||
{
|
||||
name: 'camera'
|
||||
},
|
||||
{
|
||||
name: 'camera-fill'
|
||||
},
|
||||
{
|
||||
name: 'pushpin'
|
||||
},
|
||||
{
|
||||
name: 'pushpin-fill'
|
||||
},
|
||||
{
|
||||
name: 'minus-square-fill'
|
||||
},
|
||||
{
|
||||
name: 'plus-square-fill'
|
||||
},
|
||||
{
|
||||
name: 'heart'
|
||||
},
|
||||
{
|
||||
name: 'heart-fill'
|
||||
},
|
||||
{
|
||||
name: 'reload'
|
||||
},
|
||||
{
|
||||
name: 'account'
|
||||
},
|
||||
{
|
||||
name: 'account-fill'
|
||||
},
|
||||
{
|
||||
name: 'minus-people-fill'
|
||||
},
|
||||
{
|
||||
name: 'plus-people-fill'
|
||||
},
|
||||
{
|
||||
name: 'integral'
|
||||
},
|
||||
{
|
||||
name: 'integral-fill'
|
||||
},
|
||||
{
|
||||
name: 'zhihu'
|
||||
},
|
||||
{
|
||||
name: 'zhihu-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'gift'
|
||||
},
|
||||
{
|
||||
name: 'gift-fill'
|
||||
},
|
||||
{
|
||||
name: 'zhifubao'
|
||||
},
|
||||
{
|
||||
name: 'zhifubao-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'weixin-fill'
|
||||
},
|
||||
{
|
||||
name: 'weixin-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'twitter'
|
||||
},
|
||||
{
|
||||
name: 'twitter-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'taobao'
|
||||
},
|
||||
{
|
||||
name: 'taobao-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'weibo'
|
||||
},
|
||||
{
|
||||
name: 'weibo-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'qq-fill'
|
||||
},
|
||||
{
|
||||
name: 'qq-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'moments'
|
||||
},
|
||||
{
|
||||
name: 'moments-circel-fill'
|
||||
},
|
||||
{
|
||||
name: 'qzone'
|
||||
},
|
||||
{
|
||||
name: 'qzone-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'facebook'
|
||||
},
|
||||
{
|
||||
name: 'facebook-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'baidu'
|
||||
},
|
||||
{
|
||||
name: 'baidu-circle-fill'
|
||||
},
|
||||
{
|
||||
name: 'zhuanfa'
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectIcon(name) {
|
||||
// #ifdef H5
|
||||
return this.$u.toast('H5暂不支持复制');
|
||||
// #endif
|
||||
uni.setClipboardData({
|
||||
data: name,
|
||||
success: () => {
|
||||
|
||||
}
|
||||
});
|
||||
uni.hideToast()
|
||||
this.$u.toast('图标名称已复制');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.inner-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.u-icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 190rpx;
|
||||
flex: 0 0 33.33333333%;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-icon-name {
|
||||
color: $u-tips-color;
|
||||
word-wrap: break-word;
|
||||
word-break:break-all;
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 0 14rpx;
|
||||
// 给定高度是为了图标名超出一行时，进行换行能有更好的效果
|
||||
height: 26rpx;
|
||||
}
|
||||
</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,253 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<view class="item-warp">
|
||||
<view class="item" v-for="(item, index) in list" :key="index">
|
||||
<u-lazy-load threshold="-450" height="400" img-mode="aspectFill" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="status" @loadmore="getData"></u-loadmore>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
status: 'loadmore',
|
||||
data: [{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
// 这里会加载失败，显示错误的占位图
|
||||
src: "error.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
// 这里会加载失败，显示错误的占位图
|
||||
src: "error.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
// 这里会加载失败，显示错误的占位图
|
||||
src: "error.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
// 这里会加载失败，显示错误的占位图
|
||||
src: "error.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
|
||||
},
|
||||
{
|
||||
// 这里会加载失败，显示错误的占位图
|
||||
src: "error.jpg",
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
statusChange(status) {
|
||||
//console.log(status);
|
||||
},
|
||||
clickImg(img) {
|
||||
//console.log(img);
|
||||
},
|
||||
getData() {
|
||||
let index = 0;
|
||||
this.status = 'loading';
|
||||
setTimeout(() => {
|
||||
for(let i = 0; i < 10; i++) {
|
||||
index = this.$u.random(0, this.data.length - 1);
|
||||
this.list.push({
|
||||
src: this.data[index].src
|
||||
})
|
||||
}
|
||||
this.status = 'loadmore';
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 30rpx;
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.item-warp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item-warp .item {
|
||||
flex: 0 0 335rpx;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
</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>
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<view class="">
|
||||
<u-navbar title-color="#fff" back-icon-color="#ffffff"
|
||||
:is-fixed="isFixed" :is-back="isBack"
|
||||
:background="background"
|
||||
:back-text-style="{color: '#fff'}" :title="title"
|
||||
:back-icon-name="backIconName" :back-text="backText"
|
||||
>
|
||||
<view class="slot-wrap" v-if="useSlot">
|
||||
<view class="search-wrap" v-if="search">
|
||||
<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
|
||||
<u-search v-model="keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"></u-search>
|
||||
</view>
|
||||
<view class="navbar-right" v-if="rightSlot">
|
||||
<view class="message-box right-item">
|
||||
<u-icon name="chat" size="38"></u-icon>
|
||||
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
|
||||
</view>
|
||||
<view class="dot-box right-item">
|
||||
<u-icon name="calendar-fill" size="38"></u-icon>
|
||||
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view class="map-wrap" v-if="custom">
|
||||
<u-icon name="map" color="#ffffff" size="24"></u-icon>
|
||||
<text class="map-wrap-text">轻舟已过万重山</text>
|
||||
<u-icon name="arrow-down-fill" color="#ffffff" size="22"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navbar-right" slot="right" v-if="slotRight">
|
||||
<view class="message-box right-item">
|
||||
<u-icon name="chat" size="38"></u-icon>
|
||||
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
|
||||
</view>
|
||||
<view class="dot-box right-item">
|
||||
<u-icon name="calendar-fill" size="38"></u-icon>
|
||||
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<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>
|
||||
</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="titleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">隐藏左侧返回区域</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="backChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义左侧内容</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="leftChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义右侧内容</view>
|
||||
<u-subsection :current="slotRightCurrent" :list="['是', '否']" @change="rightChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">传入整体slot</view>
|
||||
<u-subsection :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></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">背景色</view>
|
||||
<u-subsection :list="['渐变', '#39CCCC', '#B471CC', '#001f3f']" @change="bgColorChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '新闻',
|
||||
backText: '返回',
|
||||
backIconName: 'nav-back',
|
||||
right: false,
|
||||
showAction: false,
|
||||
rightSlot: false,
|
||||
useSlot: false,
|
||||
background: {
|
||||
'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||||
},
|
||||
isBack: true,
|
||||
search: false,
|
||||
custom: false,
|
||||
isFixed: true,
|
||||
keyword: '',
|
||||
// #ifdef MP
|
||||
slotRight: false,
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
slotRight: true
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
slotRightCurrent() {
|
||||
return this.slotRight ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
titleChange(index) {
|
||||
this.useSlot = false;
|
||||
this.title = index == 0 ? '新闻' : index == 1 ? '新闻列表' : '雨打梨花深闭门，忘了青春，误了青春';
|
||||
},
|
||||
leftChange(index) {
|
||||
if(index == 0) {
|
||||
this.backText = '';
|
||||
this.backIconName = 'arrow-leftward';
|
||||
} else {
|
||||
this.backText = '返回';
|
||||
this.backIconName = 'arrow-left';
|
||||
}
|
||||
},
|
||||
searchChange(index) {
|
||||
this.title = null;
|
||||
this.useSlot = true;
|
||||
this.search = false;
|
||||
this.custom = false;
|
||||
if(index == 0) {
|
||||
this.title = '新闻';
|
||||
this.useSlot = false;
|
||||
this.rightSlot = false;
|
||||
} else if(index == 1) {
|
||||
this.showAction = false;
|
||||
this.useSlot = true;
|
||||
this.rightSlot = false;
|
||||
this.search = true;
|
||||
this.slotRight = false;
|
||||
} else if(index == 2) {
|
||||
this.useSlot = true;
|
||||
this.showAction = true;
|
||||
this.rightSlot = false;
|
||||
this.search = true;
|
||||
this.slotRight = false;
|
||||
} else {
|
||||
this.useSlot = true;
|
||||
this.search = true;
|
||||
this.showAction = false;
|
||||
this.rightSlot = true;
|
||||
this.slotRight = false;
|
||||
}
|
||||
},
|
||||
backChange(index) {
|
||||
this.isBack = !!index;
|
||||
},
|
||||
bgColorChange(index) {
|
||||
this.background = {};
|
||||
if(index == 0) {
|
||||
this.background = {
|
||||
'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||||
}
|
||||
} else {
|
||||
let color = index == 1 ? '#39CCCC' : index == 2 ? '#B471CC' : '#001f3f';
|
||||
this.background = {
|
||||
background: color
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
rightChange(index) {
|
||||
if(index == 0) {
|
||||
this.slotRight = true;
|
||||
this.useSlot = false;
|
||||
} else {
|
||||
this.slotRight = false;
|
||||
}
|
||||
},
|
||||
customChange(index) {
|
||||
this.search = false;
|
||||
this.rightSlot = false;
|
||||
if(index == 0) {
|
||||
this.custom = true;
|
||||
this.title = null;
|
||||
this.isBack = false;
|
||||
this.useSlot = true;
|
||||
} else {
|
||||
this.useSlot = false;
|
||||
this.title = '新闻';
|
||||
this.isBack = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {
|
||||
//height: 200vh;
|
||||
height: calc(100% - 44px);
|
||||
height: calc(100% - 44px - constant(safe-area-inset-top));
|
||||
height: calc(100% - 44px - env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin: 0 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
margin: 0 12rpx;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
|
||||
}
|
||||
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.map-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 6px;
|
||||
background-color: rgba(240,240, 240, 0.35);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.map-wrap-text {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<view class="u-content">
|
||||
<u-parse :html="detail.content"></u-parse>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detail: {
|
||||
content: `
|
||||
<div class="content_area" id="content_area" style="display: block;">
|
||||
|
||||
<!--repaste.body.begin--><p> 巴尼小镇是云南省怒江傈僳族自治州首个易地扶贫搬迁集中安置点。从山上的金满村搬迁到巴尼小镇，近3年的时间里，搬迁户们的生活发生了可喜的变化。</p>
|
||||
<p class="photo_img_20190808" style="text-align: center;"><img src="//p2.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613380766481.jpg" alt="泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）" isflag="1"></p>
|
||||
<p class="photo_alt_20190808" style="text-align: center;"><em></em>泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）</p>
|
||||
<p> 搬出四面透风、容易漏雨的“千脚落地房”，住进如今宽敞明亮的楼房，当地居民的生活不断改善。另一边，留在山上的村民在企业帮助下改种经济林果，家庭收入节节攀升。</p>
|
||||
<p class="photo_img_20190808" style="text-align: center;"><img src="//p3.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613382671669.jpg" alt="金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）" isflag="1"></p>
|
||||
<p class="photo_alt_20190808" style="text-align: center;"><em></em>金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）</p>
|
||||
<p> 这阵子，52岁的米四东心里老惦记个事：吃两碗包谷稀饭。包谷稀饭是把包谷和蚕豆混在一起，有时加点腊肉，搁在三脚架上，生火煮制而成。在高黎贡山上，包谷稀饭曾是金满村人的主食，大多数人连个菜都不舍得炒，就配一碗蘸水吃。从山上搬下来快3年了，米四东说：“在山上盼着吃大米饭，如今天天吃米饭，又想念包谷稀饭了。”</p>
|
||||
<p> 米四东的家在巴尼小镇，地处云南省怒江傈僳族自治州泸水市洛本卓白族乡，紧邻着怒江。这里是怒江州首个易地扶贫搬迁集中安置点，2017年国庆节，金满村首批40户村民入住，2018年最后11户村民入住新居。如今已有搬迁户168户744人，都属于白族支系勒墨人。</p>
|
||||
<p> 3年时间，这里的人和生活发生了哪些变化？这个夏天，记者走进了巴尼小镇。</p>
|
||||
<p> 曾经——</p>
|
||||
<p> 8公里的距离，20年的差距</p>
|
||||
<p> 村民叁益光的家里干净亮堂，客厅的墙上，挂着一家三口在老房子前的合影。由于山地太陡，找不到平地打地基，老房子都是篱笆为墙、木板为顶、木头为柱的“千脚落地房”的样子。四面透风的房子里面黑黢黢的，下面养牲畜，中间住人，上面放粮食。“一入雨季，屋里就怕漏雨，潮乎乎有虱子”。2017年搬迁前，金满村九成村民就住在这种房子里。</p>
|
||||
<p> 从巴尼小镇往背后的高黎贡山深处走，沿着一条水泥路走上8公里，就回到了金满村村委会。金满村11个村民小组，其中5个不通公路、1个是地质灾害隐患点，这6个组如今已整体搬迁。“最远的马社王底小组有16户人家，到村委会要过悬崖、涉小河、爬陡坡，走上三四个小时。”说起过往，村委会主任沈光干嘘唏不已。</p>
|
||||
<p> 站在村委会的院子里，只见大山围绕、白云悠悠，山外面还是山。2014年底，金满村人均收入仅有1400多元，全村1310人有建档立卡贫困户1250人。沈光干说：“在山上，一年到头辛辛苦苦，还是穷成这个样！”</p>
|
||||
<p> 听老人们说起以前的生活，就像听“穿越故事”一样：去邻近的县背洋芋回来种，前后得一星期，头疼脑热不舍得花钱去卫生院……“过去从金满村到巴尼小镇的8公里距离，也是发展相差20年的距离。”巴尼小镇社区副主任和碧武介绍，群众刚搬出大山时，不会用电器，连起床叠被子的习惯都没有。</p>
|
||||
<p> 不过，在宽敞明亮的楼房里住上一段时间，大家都知道了现代生活的好处。乡中心完小五年级的学生花燕梅一家去年搬到小镇上，每天早上走几分钟就能到学校。“搬下来好，在这里衣服不容易脏，老师也讲得好！”孩子的话，总是简单明了。</p>
|
||||
<p> 如今，按照“一户一宅基地”的政策，米四东在山上的老房子拆了，一家人踏踏实实住在了小镇上。米四东感慨：“还是在山下容易赚钱。”</p>
|
||||
<p> 山下——</p>
|
||||
<p> 干活更方便，管理更规范</p>
|
||||
<p> 在巴尼小镇，最常见的交通工具就是摩托车，还有不少人家门口停着机动三轮车、小货车和轿车。米四东说，有了钱，大家都愿意买辆摩托车，“干活方便了许多。”</p>
|
||||
<p> 记者了解到，巴尼小镇目前外出务工118户282人，以本地打零工为主。在小镇上，就有家扶贫车间生产民族服装，平时有20多个女工。车间的管理人员告诉记者，一个熟练女工一个月挣三四千元没问题。</p>
|
||||
<p> 赚得多了，还要看花得多不多，对于搬出大山的人来说，上楼后的生活成本增加了多少？</p>
|
||||
<p> 米四东算了算账：小镇的水费一户每年20元，电费也不贵，过日子主要就是买些吃的。“这个就丰俭由己了，青菜要买，土豆南瓜山上就有。”</p>
|
||||
<p> 和碧武介绍，随着巴尼小镇社区建设越来越规范，一些以前“难以想象”的方法都有了实打实的用处。“比如我们这里实行积分制管理，积极参加升国旗仪式、搞好卫生都有加分，居民可以到超市用积分兑换商品。”社区超市经营者玉花梅说，去年超市里兑换了2万多元的积分。</p>
|
||||
<p> 当然，搬下来的时间并不长，对大部分人来说还是处在适应阶段。在和碧武看来，村子里的人与外界的交流还是偏少，视野和观念转变得还不够快。</p>
|
||||
<p> 米四东就有这种体会。洛本卓白族乡是“中国民间文化艺术之乡”，金满村被列入“云南省第四批旅游特色村”。作为州级非物质文化遗产传人，米四东如今在巴尼小镇教授勒墨人的传统歌舞。“等哪天怒江大峡谷的旅游火起来了，这门技艺一定会是旅游的‘招牌’产品。”米四东心里寻思着。</p>
|
||||
<p> 山上——</p>
|
||||
<p> 既抓“生态账”，又算“经济账”</p>
|
||||
<p> 一边是米四东感慨“山下容易赚钱”，另一边却是仍然留在山上的5个村民小组80户人家，如今的8公里，还有20年的发展差距吗？</p>
|
||||
<p> “‘两不愁三保障’早就实现了，现在村里的生活跟过去相比简直是天壤之别。眼下村里惦记的，是怎样既抓‘生态账’，又算‘经济账’。”洛本卓乡宣传委员麻继成兼任金满村党总支书记，搬迁启动前就驻村工作，到现在还扎在村里忙活调整种养殖业结构。</p>
|
||||
<p> 靠山吃山，金满村过去是在四五十度的山坡地上开荒种包谷，如今要进行山体生态修复，除了改种经济林果，别无他法。</p>
|
||||
<p> 麻继成说，乡里组织搬迁群众将原住地的土地林地出租、流转或退耕还林，采取“合作社+村党总支+农户+基地”模式，种植花椒、核桃、草果、香橼等经济作物。现在，1000多亩花椒、1000多亩核桃、600多亩草果和300多亩香橼已经成了山上的“绿色银行”。“村里今年准备再发展250亩香橼，香橼两年就能挂果，收益前景非常可观。”</p>
|
||||
<p> 农产品“升了级”，收入也“开了源”。麻继成说，农民在企业承包的果园里务工，每天的工资有100元，如今每天都有二三十人在果园里干活。</p>
|
||||
<p> “搬出去有盼头，留下来有干劲。”如今，乡里还在加紧研究制定金满村乡村旅游规划。“等客栈、农家乐、步行街都建好了，幸福一定来敲门。”洛本卓乡党委书记郝春荣说，巩固脱贫成果、走向乡村振兴，“好日子还在后头”。</p><!--repaste.body.end-->
|
||||
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-content {
|
||||
padding: 24rpx;
|
||||
font-size: 32rpx;
|
||||
color: $u-content-color;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-select @click="show = true" :default-value="defaultValue" :mode="mode" v-model="show" :list="list" @confirm="confirm" @cancel="cancel"></u-select>
|
||||
<view class="u-demo-result-line">select值：{{ 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="current" :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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
result: '尚未选择',
|
||||
defaultValue: [3],
|
||||
mode: 'single-column', // single-column, mutil-column, mutil-column-auto
|
||||
list: [],
|
||||
list1: [
|
||||
{
|
||||
value: '江',
|
||||
label: '江'
|
||||
},
|
||||
{
|
||||
value: '湖',
|
||||
label: '湖'
|
||||
},
|
||||
{
|
||||
value: '夜',
|
||||
label: '夜'
|
||||
},
|
||||
{
|
||||
value: '雨',
|
||||
label: '雨'
|
||||
},
|
||||
{
|
||||
value: '十',
|
||||
label: '十'
|
||||
},
|
||||
{
|
||||
value: '年',
|
||||
label: '年'
|
||||
},
|
||||
{
|
||||
value: '灯',
|
||||
label: '灯'
|
||||
}
|
||||
],
|
||||
list2: [
|
||||
[
|
||||
{
|
||||
value: '昔',
|
||||
label: '昔'
|
||||
},
|
||||
{
|
||||
value: '去',
|
||||
label: '去'
|
||||
},
|
||||
{
|
||||
value: '雪',
|
||||
label: '雪'
|
||||
},
|
||||
{
|
||||
value: '如',
|
||||
label: '如'
|
||||
},
|
||||
{
|
||||
value: '花',
|
||||
label: '花'
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
value: '今',
|
||||
label: '今'
|
||||
},
|
||||
{
|
||||
value: '来',
|
||||
label: '来'
|
||||
},
|
||||
{
|
||||
value: '花',
|
||||
label: '花'
|
||||
},
|
||||
{
|
||||
value: '似',
|
||||
label: '似'
|
||||
},
|
||||
{
|
||||
value: '雪',
|
||||
label: '雪'
|
||||
}
|
||||
]
|
||||
],
|
||||
list3: [
|
||||
{
|
||||
label: '中国',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '广西',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '南宁',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '梧州',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '柳州',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '广东',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '深圳',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '惠州',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '清远',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '美国',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '纽约',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '皇后街道',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.list = this.list1;
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.show ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusChange(index) {
|
||||
this.show = !index;
|
||||
},
|
||||
modeChange(index) {
|
||||
let type = ['single-column', 'mutil-column', 'mutil-column-auto'];
|
||||
this.mode = type[index];
|
||||
this.list = index == 0 ? this.list1 : index == 1 ? this.list2 : this.list3;
|
||||
this.show = true;
|
||||
},
|
||||
confirm(e) {
|
||||
this.result = '';
|
||||
e.map((val, index) => {
|
||||
this.result += this.result == '' ? val.label : '-' + val.label;
|
||||
})
|
||||
},
|
||||
cancel(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.badge-button {
|
||||
padding: 4rpx 6rpx;
|
||||
background-color: $u-type-error;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<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-slider :step="step" :height="height" :block-width="blockWidth"
|
||||
:active-color="activeColor" :value="30"
|
||||
:use-slot="useSlot" v-model="value"
|
||||
:min="min" :max="max"
|
||||
@end="end"
|
||||
@moving="moving"
|
||||
>
|
||||
<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
|
||||
<view class="" v-if="useSlot">
|
||||
<view class="badge-button">
|
||||
{{value}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</u-slider>
|
||||
<view class="u-demo-result-line">
|
||||
滑块值：{{value}}
|
||||
</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="['primary', 'warning', 'error', 'success']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义传入内容</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义尺寸</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">步进值</view>
|
||||
<u-subsection :list="['1', '10', '20']" @change="stepChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">最大最小值</view>
|
||||
<u-subsection :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 30,
|
||||
useSlot: false,
|
||||
setp: 1,
|
||||
activeColor: '#2979ff',
|
||||
height: 6,
|
||||
blockWidth: 30,
|
||||
step: 1,
|
||||
min: 0,
|
||||
max: 100
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.show ? 0 : 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeChange(index) {
|
||||
let type = ['primary', 'warning', 'error', 'success'];
|
||||
this.activeColor = this.$u.color[type[index]];
|
||||
},
|
||||
sizeChange(index) {
|
||||
if(index == 0) {
|
||||
this.height = 4;
|
||||
this.blockWidth = 30;
|
||||
} else {
|
||||
this.height = 6;
|
||||
this.blockWidth = 20;
|
||||
}
|
||||
},
|
||||
stepChange(index) {
|
||||
let arr = ['1', '10', '20'];
|
||||
this.step = arr[index];
|
||||
},
|
||||
slotChange(index) {
|
||||
this.useSlot = !index;
|
||||
},
|
||||
minMaxchange(index) {
|
||||
if(index == 0) {
|
||||
this.min = 0;
|
||||
this.max = 100;
|
||||
} else {
|
||||
this.min = 40;
|
||||
this.max = 80;
|
||||
}
|
||||
},
|
||||
end() {
|
||||
// console.log('end');
|
||||
},
|
||||
moving() {
|
||||
// console.log('moving');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.badge-button {
|
||||
padding: 4rpx 6rpx;
|
||||
background-color: $u-type-error;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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,144 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<u-time-line>
|
||||
<u-time-line-item nodeTop="2">
|
||||
<template v-slot:node>
|
||||
<view class="u-node" style="background: #19be6b;">
|
||||
<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-title">待取件</view>
|
||||
<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
|
||||
<view class="u-order-time">2019-05-08 12:12</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item nodeTop="2">
|
||||
<template v-slot:node>
|
||||
<view class="u-node">
|
||||
<u-icon name="account-fill" color="#fff" :size="24"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-title unacive">派送中</view>
|
||||
<view class="u-order-desc">【深圳市】快件已到达目的地，派件员为国产锦衣卫007号，电话：<text class="tel">13833882438</text>，请留意快递信息</view>
|
||||
<view class="u-order-time">2019-05-08 06:03</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item nodeTop="2">
|
||||
<template v-slot:node>
|
||||
<view class="u-node">
|
||||
<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-title unacive">运输中</view>
|
||||
<view class="u-order-desc">【深圳市】快递已到达 深圳固戍一部</view>
|
||||
<view class="u-order-time">2019-05-07 08:05</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-desc">【深圳市】快件已从深圳运转中心发出，正在发往深圳宝安一部</view>
|
||||
<view class="u-order-time">2019-12-06 22:30</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-desc">【深圳市】快件已到达 深圳运转中心</view>
|
||||
<view class="u-order-time">2019-12-04 16:42</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-desc">【郑州市】快件已从郑州运转中心出发，正在发往深圳运转中心</view>
|
||||
<view class="u-order-time">2019-12-02 12:55</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-desc">【郑州市】快件已到达 郑州运转中心</view>
|
||||
<view class="u-order-time">2019-12-02 08:23</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
<u-time-line-item nodeTop="0">
|
||||
<template v-slot:node>
|
||||
<view class="u-node">
|
||||
<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-desc">您购买的商品【尚方宝剑，先斩后奏】，经由北京军区仓库发货，国内快递承运人【中南海保镖】。</view>
|
||||
<view class="u-order-time">2019-12-01 07:00</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
</u-time-line>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 24rpx 24rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.u-node {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.u-order-title {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.u-order-title.unacive {
|
||||
color: rgb(150, 150, 150);
|
||||
}
|
||||
|
||||
.u-order-desc {
|
||||
color: rgb(150, 150, 150);
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.u-order-time {
|
||||
color: rgb(200, 200, 200);
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.tel {
|
||||
color: $u-type-primary;
|
||||
}
|
||||
</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 :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,98 @@
|
|||
<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-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode"
|
||||
@change="codeChange" :startText="startText" :changeText="changeText"
|
||||
:endText="endText"></u-verification-code>
|
||||
<u-button @click="getCode">{{tips}}</u-button>
|
||||
<u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</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="0" :list="['60s', '10s', '5s']" @change="secondsChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义提示语</view>
|
||||
<u-subsection :current="1" :list="['是', '否']" @change="textChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tips: '',
|
||||
seconds: 60,
|
||||
refCode: null,
|
||||
startText: '获取验证码',
|
||||
changeText: 'X秒重新获取',
|
||||
endText: '重新获取'
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 注意这里为错误示例，目前微信小程序最新稳定版开发工具如此
|
||||
// 赋值会报错，很诡异，其他端无此问题
|
||||
// this.refCode = this.$refs.uCode;
|
||||
},
|
||||
methods: {
|
||||
codeChange(text) {
|
||||
// console.log(text);
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
secondsChange(index) {
|
||||
this.seconds = index == 0 ? 60 : index == 1 ? 10 : 5;
|
||||
},
|
||||
textChange(index) {
|
||||
if(index == 0) {
|
||||
this.startText = '点一下获取',
|
||||
this.changeText = '重新获取Xs',
|
||||
this.endText = '再次获取'
|
||||
} else {
|
||||
this.startText = '获取验证码',
|
||||
this.changeText = 'X秒重新获取',
|
||||
this.endText = '重新获取'
|
||||
}
|
||||
},
|
||||
end() {
|
||||
this.$u.toast('倒计时结束');
|
||||
},
|
||||
start() {
|
||||
this.$u.toast('倒计时开始');
|
||||
},
|
||||
reset() {
|
||||
this.$refs.uCode.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<view class="">
|
||||
<view class="u-card-wrap">
|
||||
<u-card @click="click" @head-click="headClick" :title="title" :sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border">
|
||||
<view class="" slot="body">
|
||||
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
|
||||
<view class="u-body-item-title u-line-2">
|
||||
瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
|
||||
</view>
|
||||
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="u-body-item u-flex u-row-between u-p-b-0">
|
||||
<view class="u-body-item-title u-line-2">
|
||||
釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放
|
||||
</view>
|
||||
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" slot="foot">
|
||||
<u-icon v-if="bottomSlot" name="chat-fill" size="34" label="30评论"></u-icon>
|
||||
</view>
|
||||
</u-card>
|
||||
</view>
|
||||
<view class="u-config-wrap u-demo">
|
||||
<view class="u-config-title u-border-bottom">
|
||||
参数配置
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">左上角图标</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="thumbChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">内边距</view>
|
||||
<u-subsection current="1" :list="['20', '30', '40']" @change="paddingChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">底部</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="bottomChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">外边框</view>
|
||||
<u-subsection :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '素胚勾勒出青花，笔锋浓转淡',
|
||||
subTitle: '2020-05-15',
|
||||
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||
padding: 20,
|
||||
bottomSlot: true,
|
||||
border: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
thumbChange(index) {
|
||||
this.thumb = index == 0 ? 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' : '';
|
||||
},
|
||||
paddingChange(index) {
|
||||
this.padding = [20, 30, 40][index];
|
||||
},
|
||||
bottomChange(index) {
|
||||
this.bottomSlot = !index;
|
||||
},
|
||||
borderChange(index) {
|
||||
this.border = !index;
|
||||
},
|
||||
click(index) {
|
||||
console.log(index);
|
||||
},
|
||||
headClick(index) {
|
||||
console.log(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.u-card-wrap {
|
||||
background-color: $u-bg-color;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.u-body-item {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
|
||||
.u-body-item image {
|
||||
width: 120rpx;
|
||||
flex: 0 0 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<view class="">
|
||||
<u-checkbox-group :size="size" :width="width"
|
||||
:wrap="wrap" :max="max"
|
||||
@change="checkboxGroupChange"
|
||||
:activeColor="activeColor"
|
||||
>
|
||||
<u-checkbox @change="checkboxChange"
|
||||
v-model="item.checked" v-for="(item, index) in list"
|
||||
:key="index" :name="item.name"
|
||||
:shape="shape"
|
||||
:disabled="item.disabled"
|
||||
>{{item.name}}</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<view class="u-demo-result-line">
|
||||
{{result.length ? `选中了"${getResult}"` : '请选择'}}
|
||||
</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="shapeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">整体大小(单位rpx)</view>
|
||||
<u-subsection current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">激活颜色</view>
|
||||
<u-subsection :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">默认选中第一个</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">每个占一行</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">每个宽度50%</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">最大选择数量</view>
|
||||
<u-subsection current="2" :list="['1', '2', '3']" @change="maxChange"></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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: '荔枝',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '橙子',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '草莓',
|
||||
checked: false,
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
disabled: false,
|
||||
checked: true,
|
||||
result: [],
|
||||
shape: 'square',
|
||||
max: 3,
|
||||
activeColor: '#2979ff',
|
||||
size: 34,
|
||||
wrap: false,
|
||||
width: 'auto'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getResult() {
|
||||
return this.result.join(",");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shapeChange(index) {
|
||||
this.shape = index == 0 ? 'square' : 'circle';
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? 30 : index == 1 ? 40 : 50;
|
||||
},
|
||||
defaultChooseChange(index) {
|
||||
// 特别处理对第一个选的选中的情况，涉及到提示语，选中状态等
|
||||
// 实际开发中不会存在这些情况，只是演示用
|
||||
if(index == 0) {
|
||||
this.list[0].checked = true;
|
||||
this.result = [this.list[0].name];
|
||||
} else {
|
||||
this.list[0].checked = false;
|
||||
this.result.splice(this.result.indexOf(this.list[0].name), 1);
|
||||
}
|
||||
},
|
||||
maxChange(index) {
|
||||
this.max = index + 1;
|
||||
},
|
||||
disabledChange(index) {
|
||||
if(index == 0) {
|
||||
this.list[0].disabled = true;
|
||||
} else {
|
||||
this.list[0].disabled = false;
|
||||
}
|
||||
},
|
||||
activeColorChange(index) {
|
||||
// 如果用户尚未勾选任何checkbox，切换颜色时，默认选中第一个让用户看到效果，因为勾选了才有效果
|
||||
if(!this.result.length) this.list[0].checked = true;
|
||||
let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info';
|
||||
this.activeColor = this.$u.color[theme];
|
||||
},
|
||||
// 选中某个复选框时，由checkbox时触发
|
||||
checkboxChange(e) {
|
||||
// console.log(e);
|
||||
},
|
||||
// 选中任一checkbox时，由checkbox-group触发
|
||||
checkboxGroupChange(e) {
|
||||
this.result = e;
|
||||
},
|
||||
widthChange(index) {
|
||||
this.width = index == 0 ? '50%' : '';
|
||||
},
|
||||
wrapChange(index) {
|
||||
this.wrap = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-divider :type="type" :borderColor="borderColor" :bg-color="bgColor" @click="click"
|
||||
:half-width="halfWidth" :color="color" :font-size="fontSize">{{text}}</u-divider>
|
||||
</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="textChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">单边线宽</view>
|
||||
<u-subsection current="1" :list="['50', '150', '250']" @change="halfWidthChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">横线颜色</view>
|
||||
<u-subsection :list="['#dcdfe6', 'primary', 'error', 'warning', 'success']" @change="borderColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">内容样式</view>
|
||||
<u-subsection :list="['默认', '自定义']" @change="contentChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: '没有更多了',
|
||||
bgColor: '#fafafa',
|
||||
halfWidth: 150,
|
||||
borderColor: '#dcdfe6',
|
||||
type: 'primary',
|
||||
color: '#909399',
|
||||
fontSize: '26'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textChange(index) {
|
||||
this.text = index == 0 ? '没有更多了' : '到底了';
|
||||
},
|
||||
halfWidthChange(index) {
|
||||
this.halfWidth = index == 0 ? 50 : index == 1 ? 150 : 250;
|
||||
},
|
||||
borderColorChange(index) {
|
||||
if(index == 0) {
|
||||
this.borderColor = '#dcdfe6';
|
||||
} else {
|
||||
// 因为border-color参数优先级高于type，要让type起作用，就需要设置border-color为空
|
||||
this.borderColor = '';
|
||||
this.type = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
|
||||
}
|
||||
},
|
||||
contentChange(index) {
|
||||
if(index == 0) {
|
||||
this.color = '#909399';
|
||||
this.fontSize = 26;
|
||||
} else {
|
||||
this.color = this.$u.color['primary'];
|
||||
this.fontSize = 30;
|
||||
}
|
||||
},
|
||||
click() {
|
||||
console.log('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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,96 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area u-flex u-row-center">
|
||||
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
|
||||
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
|
||||
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
|
||||
</u-image>
|
||||
</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="statusCurrent" :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
|
||||
</view>
|
||||
<!-- 微信小程序中，无法动态切换slot，所以隐藏此部分的演示 -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">加载中状态</view>
|
||||
<u-subsection :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">加载失败状态</view>
|
||||
<u-subsection :list="['默认', '自定义']" @change="errorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">形状</view>
|
||||
<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
|
||||
width: '200',
|
||||
height: '200',
|
||||
loadingSlot: false,
|
||||
statusCurrent: 0,
|
||||
errorSlot: false,
|
||||
shape: 'square'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// statusCurrent() {
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
statusChange(index) {
|
||||
// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成
|
||||
if (index == 0) {
|
||||
this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg';
|
||||
this.$refs.uImage.loading = false;
|
||||
this.$refs.uImage.isError = false;
|
||||
} else if (index == 1) {
|
||||
this.$refs.uImage.loading = true;
|
||||
} else {
|
||||
this.$refs.uImage.loading = false;
|
||||
this.$refs.uImage.isError = true;
|
||||
}
|
||||
},
|
||||
loadingChange(index) {
|
||||
this.statusCurrent = 1;
|
||||
this.statusChange(1);
|
||||
if (index == 0) {
|
||||
this.loadingSlot = false;
|
||||
} else {
|
||||
this.loadingSlot = true;
|
||||
}
|
||||
},
|
||||
errorChange(index) {
|
||||
this.statusCurrent = 2;
|
||||
this.statusChange(2);
|
||||
if (index == 0) {
|
||||
this.errorSlot = false;
|
||||
} else {
|
||||
this.errorSlot = true;
|
||||
}
|
||||
},
|
||||
shapeChange(index) {
|
||||
this.shape = index == 0 ? 'square' : 'circle';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo-area {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area u-flex u-row-center">
|
||||
<!-- 头条小程序因为兼容性，必须要给组件写上u-line类 -->
|
||||
<u-line class="u-line" :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
|
||||
</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', 'warning', 'error', 'info']" @change="colorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">线条类型</view>
|
||||
<u-subsection :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">细边</view>
|
||||
<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">方向</view>
|
||||
<u-subsection :list="['水平', '垂直']" @change="directionChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
direction: 'row',
|
||||
hairLine: true,
|
||||
length: '100%',
|
||||
color: this.$u.color['primary'],
|
||||
borderStyle: 'solid'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
colorChange(index) {
|
||||
this.color = this.$u.color[['primary', 'success', 'warning', 'error', 'info'][index]];
|
||||
},
|
||||
hairLineChange(index) {
|
||||
this.hairLine = !index;
|
||||
},
|
||||
directionChange(index) {
|
||||
this.direction = index == 0 ? 'row' : 'col';
|
||||
if(index == 0) this.length = '100%';
|
||||
else this.length = '50rpx';
|
||||
},
|
||||
borderStyleChange(index) {
|
||||
this.borderStyle = ['solid', 'dashed', 'dotted'][index];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo-area {
|
||||
|
||||
}
|
||||
</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-loading :mode="mode" :show="show" :color="color" :size="size"></u-loading>
|
||||
</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="['default', 'primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">尺寸(单位rpx)</view>
|
||||
<u-subsection current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否显示</view>
|
||||
<u-subsection current="1" :list="['否', '是']" @change="showChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mode: 'circle',
|
||||
color: '#c7c7c7',
|
||||
size: '34',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'circle' : 'flower';
|
||||
},
|
||||
colorChange(index) {
|
||||
if(index == 0) {
|
||||
this.color = '#c7c7c7';
|
||||
} else {
|
||||
let color = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
|
||||
this.color = this.$u.color[color];
|
||||
}
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? '28' : index == 1 ? '34' : '40';
|
||||
},
|
||||
showChange(index) {
|
||||
// 两个!!可以把0变成false，1变成true
|
||||
this.show = !!index;
|
||||
},
|
||||
// 选中某个复选框时，由checkbox时触发
|
||||
checkboxChange(e) {
|
||||
//console.log(e);
|
||||
},
|
||||
// 选中任一checkbox时，由checkbox-group触发
|
||||
checkboxGroupChange(e) {
|
||||
this.result = e;
|
||||
// console.log(this.result);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo {}
|
||||
</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,142 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<view class="">
|
||||
<u-radio-group :shape="shape" :size="size" :width="width" :wrap="wrap" v-model="value" @change="radioGroupChange" :activeColor="activeColor">
|
||||
<u-radio @change="radioChange" v-for="(item, index) in list" :disabled="item.disabled"
|
||||
:key="index" :name="item.name"
|
||||
>{{item.name}}</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="u-demo-result-line">
|
||||
{{value ? `选中了"${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="1" :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">整体大小(单位rpx)</view>
|
||||
<u-subsection current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">激活颜色</view>
|
||||
<u-subsection :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">每个占一行</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">每个宽度50%</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">默认选中第一个</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: '荔枝',
|
||||
checked: true,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '橙子',
|
||||
checked: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '草莓',
|
||||
checked: false,
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
disabled: false,
|
||||
result: '荔枝',
|
||||
shape: 'circle',
|
||||
value: '荔枝',
|
||||
activeColor: '#2979ff',
|
||||
size: 34,
|
||||
wrap: false,
|
||||
width: 'auto'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shapeChange(index) {
|
||||
this.shape = index == 0 ? 'square' : 'circle';
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? 30 : index == 1 ? 40 : 50;
|
||||
},
|
||||
defaultChooseChange(index) {
|
||||
// 特别处理对第一个选的选中的情况，涉及到提示语，选中状态等
|
||||
// 实际开发中不会存在这些情况，只是演示用
|
||||
if(index == 0) {
|
||||
this.result = this.value = this.list[0].name;
|
||||
} else {
|
||||
if(this.value == this.list[0].name) {
|
||||
this.result = this.value = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
activeColorChange(index) {
|
||||
// 如果用户尚未勾选任何radio，切换颜色时，默认选中第一个让用户看到效果，因为勾选了才有效果
|
||||
if(!this.result) this.result = this.value = this.list[0].name;
|
||||
let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info';
|
||||
this.activeColor = this.$u.color[theme];
|
||||
},
|
||||
disabledChange(index) {
|
||||
if(index == 0) {
|
||||
this.list[0].disabled = true;
|
||||
} else {
|
||||
this.list[0].disabled = false;
|
||||
}
|
||||
},
|
||||
// 选中某个单选框时，由radio时触发
|
||||
radioChange(e) {
|
||||
//console.log(e);
|
||||
},
|
||||
// 选中任一radio时，由radio-group触发
|
||||
radioGroupChange(e) {
|
||||
this.result = e;
|
||||
//console.log(e);
|
||||
},
|
||||
widthChange(index) {
|
||||
this.width = index == 0 ? '50%' : '';
|
||||
},
|
||||
wrapChange(index) {
|
||||
this.wrap = !index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-rate v-model="value" :count="count" @change="change"
|
||||
:active-color="activeColor" :inaction-color="inactiveColor"
|
||||
:active-icon="activeIcon" :inactive-icon="inactiveIcon"
|
||||
:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
|
||||
</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, 2, 3, 4]" @change="currentChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">镂空状态</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="plainChange"></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="iconChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">是否分层</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="decimalChange"></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 current="1" :list="[4, 5, 6]" @change="countChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 1.4.5后推荐使用v-model双向绑定，弃用current
|
||||
// current: 1,
|
||||
activeColor: '#FA3534',
|
||||
inactiveColor: '#b2b2b2',
|
||||
disabled: false,
|
||||
count: 5,
|
||||
customIcon: false,
|
||||
plain: false,
|
||||
value: 0,
|
||||
colors: [],
|
||||
icons: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(n) {
|
||||
// console.log(n);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeIcon() {
|
||||
let icon = this.customIcon ? 'heart' : 'star';
|
||||
return this.plain ? icon : icon + '-fill'
|
||||
},
|
||||
inactiveIcon() {
|
||||
let icon = this.customIcon ? 'heart' : 'star';
|
||||
return this.plain ? icon : icon + '-fill'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentChange(index) {
|
||||
this.value = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
|
||||
},
|
||||
plainChange(index) {
|
||||
this.plain = !index;
|
||||
},
|
||||
disabledChange(index) {
|
||||
this.disabled = index == 0 ? true : false;
|
||||
},
|
||||
countChange(index) {
|
||||
this.count = index == 0 ? 4 : index == 1 ? 5 : 6;
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.activeColor = this.$u.color['primary'];
|
||||
this.inactiveColor = this.$u.color['info'];
|
||||
} else {
|
||||
this.activeColor = '#FA3534';
|
||||
this.inactiveColor = '#b2b2b2';
|
||||
}
|
||||
},
|
||||
decimalChange(index) {
|
||||
if(index == 0) {
|
||||
this.colors = ['#ffc454', '#ffb409', '#ff9500'];
|
||||
this.icons = ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'];
|
||||
} else {
|
||||
this.colors = [];
|
||||
this.icons = [];
|
||||
}
|
||||
},
|
||||
iconChange(index) {
|
||||
this.customIcon = !index;
|
||||
},
|
||||
change(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-read-more @open="open" @close="close" :toggle="toggle" :show-height="showHeight" ref="uReadMore">
|
||||
<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<u-parse :html="content"></u-parse>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
<!-- #endif -->
|
||||
</u-read-more>
|
||||
</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="['100', '200', '400']" @change="showHeightChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">展开后可关闭</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="toggleChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: `浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
|
||||
忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
|
||||
沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
|
||||
我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。`,
|
||||
showHeight: 200,
|
||||
toggle: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showHeightChange(index) {
|
||||
this.showHeight = index == 0 ? 100 : index == 1 ? 200 : 400;
|
||||
},
|
||||
toggleChange(index) {
|
||||
this.toggle = index == 0 ? true : false;
|
||||
},
|
||||
open() {
|
||||
// console.log('open');
|
||||
},
|
||||
close() {
|
||||
// console.log('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 通过/deep/样式穿透去控制组件的内容
|
||||
.wrap /deep/ .u-content {
|
||||
color: #666!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<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-search v-model="value" @change="change" @custom="custom" @search="search" :shape="shape" :clearabled="clearabled"
|
||||
:show-action="showAction" :input-align="inputAlign" @clear="clear"></u-search>
|
||||
</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="valueChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">搜索框形状</view>
|
||||
<u-subsection :list="['圆形', '方形']" @change="shapeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">清除控件</view>
|
||||
<u-subsection :list="['启用', '关闭']" @change="clearabledChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">右侧控件</view>
|
||||
<u-subsection :list="['启用', '关闭']" @change="showActionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">水平对齐方式</view>
|
||||
<u-subsection :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
shape: 'round',
|
||||
clearabled: true,
|
||||
showAction: true,
|
||||
inputAlign: 'left'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件
|
||||
// 也能知道value值当前的内容
|
||||
value(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
valueChange(index) {
|
||||
this.value = index == 0 ? '' : '天山雪莲';
|
||||
},
|
||||
shapeChange(index) {
|
||||
this.shape = index == 0 ? 'round' : 'square';
|
||||
},
|
||||
clearabledChange(index) {
|
||||
this.clearabled = index == 0 ? true : false;
|
||||
},
|
||||
showActionChange(index) {
|
||||
this.showAction = index == 0 ? true : false;
|
||||
},
|
||||
inputAlignChange(index) {
|
||||
this.inputAlign = index == 0 ? 'left' : index == 1 ? 'center' : 'right';
|
||||
},
|
||||
change(value) {
|
||||
// 搜索框内容变化时，会触发此事件，value值为输入框的内容
|
||||
//console.log(value);
|
||||
},
|
||||
custom(value) {
|
||||
//console.log(value);
|
||||
this.$u.toast('输入值为：' + value)
|
||||
},
|
||||
search(value) {
|
||||
this.$refs.uToast.show({
|
||||
title: '搜索内容为：' + value,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
// console.log(this.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<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="container u-skeleton">
|
||||
<view class="userinfo">
|
||||
<block>
|
||||
<!--u-skeleton-circle 绘制圆形-->
|
||||
<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
|
||||
<!--u-skeleton-fillet 绘制圆角矩形-->
|
||||
<text class="u-skeleton-fillet">{{userInfo.nickName}}</text>
|
||||
</block>
|
||||
</view>
|
||||
<view style="margin: 20px 0">
|
||||
<!--u-skeleton-rect 绘制矩形-->
|
||||
<view class="u-skeleton-rect lists" v-for="(item,index) in lists" :key="index">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--引用组件-->
|
||||
<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation"
|
||||
:el-color="elColor" :border-radius="borderRadius"></u-skeleton>
|
||||
</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="loadingChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">骨架动画</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="animationChange"></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 {
|
||||
userInfo: {
|
||||
avatarUrl: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||||
nickName: 'uView'
|
||||
},
|
||||
lists: [
|
||||
'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
|
||||
'人生得意须尽欢，莫使金樽空对月',
|
||||
'天生我材必有用，千金散尽还复来',
|
||||
],
|
||||
loading: true, // 是否显示骨架屏组件
|
||||
animation: false,
|
||||
elColor: '#e5e5e5',
|
||||
borderRadius: 10,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.loading ? 0 : 1;
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
animationChange(index) {
|
||||
this.animation = index == 0 ? true : false;
|
||||
this.getData();
|
||||
},
|
||||
loadingChange(index) {
|
||||
this.loading = index == 0 ? true : false;
|
||||
if(index == 0) this.getData();
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.elColor = this.$u.color['primary'];
|
||||
this.borderRadius = 14;
|
||||
} else {
|
||||
this.elColor = '#e5e5e5';
|
||||
this.borderRadius = 10;
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
this.loading = true;
|
||||
// 通过延时模拟向后端请求数据，调隐藏骨架屏
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.userinfo-avatar {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
margin: 20rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.lists {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</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,153 @@
|
|||
<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-swipe-action
|
||||
bg-color="rgb(250, 250, 250)"
|
||||
@open="open"
|
||||
:disabled="disabled"
|
||||
:index="index"
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id"
|
||||
:show="item.show"
|
||||
@click="click"
|
||||
:btn-width="btnWidth"
|
||||
@close="close"
|
||||
:options="options"
|
||||
@content-click="contentClick"
|
||||
>
|
||||
<view class="item u-border-bottom">
|
||||
<image mode="aspectFill" :src="item.images" />
|
||||
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
|
||||
<view class="title-wrap">
|
||||
<text class="title u-line-2">{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
</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="showChange"></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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list1: [
|
||||
{
|
||||
id: 1,
|
||||
title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
|
||||
images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
|
||||
images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
|
||||
images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
disabled: false,
|
||||
btnWidth: 180,
|
||||
show: false,
|
||||
options: [
|
||||
{
|
||||
text: '收藏',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.list = this.list1;
|
||||
}, 0)
|
||||
},
|
||||
methods: {
|
||||
disabledChange(index) {
|
||||
this.disabled = index == 0 ? true : false;
|
||||
},
|
||||
showChange(index) {
|
||||
if (index == 0) {
|
||||
this.list.map((val, ids) => {
|
||||
if (ids != 0) val.show = false;
|
||||
else val.show = true;
|
||||
});
|
||||
} else {
|
||||
this.list[0].show = false;
|
||||
}
|
||||
},
|
||||
click(index, index1) {
|
||||
if(index1 == 1) {
|
||||
this.list.splice(index, 1);
|
||||
this.$u.toast(`删除了第${index}个cell`);
|
||||
} else {
|
||||
this.list[index].show = false;
|
||||
this.$u.toast(`收藏成功`);
|
||||
}
|
||||
},
|
||||
open(index) {
|
||||
this.list[index].show = true;
|
||||
this.list.map((val, idx) => {
|
||||
if (index != idx) this.list[idx].show = false;
|
||||
});
|
||||
},
|
||||
close(index) {
|
||||
this.list[index].show = false;
|
||||
},
|
||||
contentClick(index) {
|
||||
// console.log(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 120rpx;
|
||||
flex: 0 0 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: $u-content-color;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</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,113 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-switch v-model="checked" :loading="loading"
|
||||
:size="size" @change="change"
|
||||
:active-color="activeColor"
|
||||
:disabled="disabled"
|
||||
:activeValue="100"
|
||||
:inactiveValue="1"
|
||||
></u-switch>
|
||||
</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="modelChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">颜色</view>
|
||||
<u-subsection :list="['primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">尺寸(单位rpx)</view>
|
||||
<u-subsection current="1" :list="['40', '60', '80']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">加载中</view>
|
||||
<u-subsection :list="['否', '是']" @change="loadingChange"></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="['关闭', '打开']" @change="asyncChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
activeColor: '#2979ff',
|
||||
size: 50,
|
||||
loading: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modelChange(index) {
|
||||
// 两个!!可以把0变成false，1变成true
|
||||
this.checked = !!index;
|
||||
},
|
||||
colorChange(index) {
|
||||
let color = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : 'success';
|
||||
this.activeColor = this.$u.color[color];
|
||||
},
|
||||
sizeChange(index) {
|
||||
this.size = index == 0 ? '40' : index == 1 ? '60' : '80';
|
||||
},
|
||||
loadingChange(index) {
|
||||
this.loading = !!index;
|
||||
},
|
||||
disabledChange(index) {
|
||||
this.disabled = index == 0 ? true : false;
|
||||
},
|
||||
asyncChange(index) {
|
||||
if(this.checked && index == 1) {
|
||||
this.$u.toast('请先关闭选择器');
|
||||
return;
|
||||
}
|
||||
if(!this.checked && index == 0) {
|
||||
this.$u.toast('请先打开选择器');
|
||||
return;
|
||||
}
|
||||
let str = index == 0 ? '是否要关闭？' : '是否要打开？';
|
||||
this.loading = true;
|
||||
let oldStatus = this.checked;
|
||||
this.checked = true;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: str,
|
||||
complete: (res) => {
|
||||
this.loading = false;
|
||||
if(res.confirm) {
|
||||
if(oldStatus) this.checked = false;
|
||||
else this.checked = true;
|
||||
} else {
|
||||
if(!oldStatus) this.checked = false;
|
||||
else this.checked = true;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
change(value) {
|
||||
// console.log(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-demo {}
|
||||
</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,224 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<u-waterfall v-model="flowList" ref="uWaterfall">
|
||||
<template v-slot:left="{ leftList }">
|
||||
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
||||
<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
|
||||
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
||||
<view class="demo-title">{{ item.title }}</view>
|
||||
<view class="demo-price">{{ item.price }}元</view>
|
||||
<view class="demo-tag">
|
||||
<view class="demo-tag-owner">自营</view>
|
||||
<view class="demo-tag-text">放心购</view>
|
||||
</view>
|
||||
<view class="demo-shop">{{ item.shop }}</view>
|
||||
<view class="u-close">
|
||||
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{ rightList }">
|
||||
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
|
||||
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
||||
<view class="demo-title">{{ item.title }}</view>
|
||||
<view class="demo-price">{{ item.price }}元</view>
|
||||
<view class="demo-tag">
|
||||
<view class="demo-tag-owner">自营</view>
|
||||
<view class="demo-tag-text">放心购</view>
|
||||
</view>
|
||||
<view class="demo-shop">{{ item.shop }}</view>
|
||||
<view class="u-close">
|
||||
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadStatus: 'loadmore',
|
||||
flowList: [],
|
||||
list: [
|
||||
{
|
||||
price: 35,
|
||||
title: '北国风光，千里冰封，万里雪飘',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 75,
|
||||
title: '望长城内外，惟余莽莽',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 385,
|
||||
title: '大河上下，顿失滔滔',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 784,
|
||||
title: '欲与天公试比高',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 7891,
|
||||
title: '须晴日，看红装素裹，分外妖娆',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 2341,
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
title: '江山如此多娇，引无数英雄竞折腰',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 661,
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
title: '惜秦皇汉武，略输文采',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 1654,
|
||||
title: '唐宗宋祖，稍逊风骚',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 1678,
|
||||
title: '一代天骄，成吉思汗',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 924,
|
||||
title: '只识弯弓射大雕',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
|
||||
},
|
||||
{
|
||||
price: 8243,
|
||||
title: '俱往矣，数风流人物，还看今朝',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.addRandomData();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadStatus = 'loading';
|
||||
// 模拟数据加载
|
||||
setTimeout(() => {
|
||||
this.addRandomData();
|
||||
this.loadStatus = 'loadmore';
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
addRandomData() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let index = this.$u.random(0, this.list.length - 1);
|
||||
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
||||
let item = JSON.parse(JSON.stringify(this.list[index]));
|
||||
item.id = this.$u.guid();
|
||||
this.flowList.push(item);
|
||||
}
|
||||
},
|
||||
remove(id) {
|
||||
this.$refs.uWaterfall.remove(id);
|
||||
},
|
||||
clear() {
|
||||
this.$refs.uWaterfall.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* page不能写带scope的style标签中，否则无效 */
|
||||
page {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-warter {
|
||||
border-radius: 8px;
|
||||
margin: 5px;
|
||||
background-color: #ffffff;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-close {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
|
||||
.demo-img-wrap {
|
||||
}
|
||||
|
||||
.demo-image {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 30rpx;
|
||||
margin-top: 5px;
|
||||
color: $u-main-color;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.demo-tag {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.demo-tag-owner {
|
||||
background-color: $u-type-error;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.demo-tag-text {
|
||||
border: 1px solid $u-type-primary;
|
||||
color: $u-type-primary;
|
||||
margin-left: 10px;
|
||||
border-radius: 50rpx;
|
||||
line-height: 1;
|
||||
padding: 4rpx 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.demo-price {
|
||||
font-size: 30rpx;
|
||||
color: $u-type-error;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.demo-shop {
|
||||
font-size: 22rpx;
|
||||
color: $u-tips-color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</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,121 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-button @click="btnClick" data-name="3333" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</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 :list="['default', 'primary', 'error', 'warning', 'success']" @change="typeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">尺寸大小</view>
|
||||
<u-subsection :list="['默认', '中等', '迷你']" @change="sizeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">形状</view>
|
||||
<u-subsection :list="['直角', '圆角']" @change="shapeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">镂空</view>
|
||||
<u-subsection :current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">水波纹(感觉哪里有问题？点击顶部的按钮试试)</view>
|
||||
<u-subsection :current="1" :list="['是', '否']" @change="rippleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">细边框</view>
|
||||
<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">加载中</view>
|
||||
<u-subsection :current="1" :list="['是', '否']" @change="loadingChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hairLine: true,
|
||||
type: 'default',
|
||||
size: 'default',
|
||||
shape: 'square',
|
||||
plain: false,
|
||||
ripple: false,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeChange(e) {
|
||||
switch (e) {
|
||||
case 0:
|
||||
this.type = 'default';
|
||||
break;
|
||||
case 1:
|
||||
this.type = 'primary';
|
||||
break;
|
||||
case 2:
|
||||
this.type = 'error';
|
||||
break;
|
||||
case 3:
|
||||
this.type = 'warning';
|
||||
break;
|
||||
case 4:
|
||||
this.type = 'success';
|
||||
break;s
|
||||
}
|
||||
},
|
||||
sizeChange(e) {
|
||||
switch (e) {
|
||||
case 0:
|
||||
this.size = 'default';
|
||||
break;
|
||||
case 1:
|
||||
this.size = 'medium';
|
||||
break;
|
||||
case 2:
|
||||
this.size = 'mini';
|
||||
break;
|
||||
}
|
||||
},
|
||||
shapeChange(e) {
|
||||
this.shape = e == 0 ? 'square' : 'circle';
|
||||
},
|
||||
plainChange(e) {
|
||||
this.plain = e == 0 ? true : false;
|
||||
},
|
||||
rippleChange(e) {
|
||||
this.ripple = e == 0 ? true : false;
|
||||
},
|
||||
hairLineChange(e) {
|
||||
this.hairLine = e == 0 ? true : false;
|
||||
},
|
||||
loadingChange(index) {
|
||||
this.loading = index == 0 ? true : false;
|
||||
},
|
||||
btnClick() {
|
||||
this.$u.toast('按钮被点击')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.box /deep/ button {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap" style="padding-left:0;padding-right:0;margin-left: -40rpx;margin-right: -40rpx;">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-cell-group title="读万卷书">
|
||||
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i ndex="index" @click="click" :hover-class="hoverClass"
|
||||
:arrow="arrow" :title="title" :icon="icon">
|
||||
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
|
||||
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
|
||||
</u-cell-item>
|
||||
<u-cell-item :border-bottom="false" value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
|
||||
<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
|
||||
<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
|
||||
<u-field slot="value"></u-field>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</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="iconChange"></u-subsection>
|
||||
</view>
|
||||
<!-- 小程序无法动态切换slot -->
|
||||
<!-- #ifndef MP -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义右侧内容</view>
|
||||
<u-subsection :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">描述信息</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">更换标题</view>
|
||||
<u-subsection :list="['是', '否']" @change="titleChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">右侧箭头</view>
|
||||
<u-subsection :list="['是', '否']" @change="arrowChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icon: 'setting',
|
||||
arrow: true,
|
||||
label: '',
|
||||
title: '青山一道同云雨',
|
||||
rightSlot: true,
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hoverClass() {
|
||||
// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
|
||||
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
iconChange(index) {
|
||||
this.icon = index == 0 ? 'setting' : 'file-text'
|
||||
},
|
||||
arrowChange(index) {
|
||||
this.arrow = index == 0 ? true : false
|
||||
},
|
||||
lableChange(index) {
|
||||
this.label = index == 0 ? '岂曰无衣，与子同裳' : ''
|
||||
},
|
||||
titleChange(index) {
|
||||
this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
|
||||
},
|
||||
rightSlotChange(index) {
|
||||
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
|
||||
if (index == 0) this.arrow = true;
|
||||
else this.arrow = false;
|
||||
},
|
||||
click(index) {
|
||||
// console.log(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gab {
|
||||
background-color: rgb(245, 245, 245);
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
background-color: rgb(241, 241, 241);
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 30rpx 00rpx;
|
||||
font-size: 28rpx;
|
||||
color: $u-type-info;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</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,132 @@
|
|||
<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">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
|
||||
<view class="count-to-demo">
|
||||
<u-count-to
|
||||
class="count-to"
|
||||
:useEasing="useEasing"
|
||||
ref="uCountTo"
|
||||
:autoplay="autoplay"
|
||||
:startVal="startVal"
|
||||
:endVal="endVal"
|
||||
:duration="duration"
|
||||
:decimals="decimals"
|
||||
:bold="bold"
|
||||
@end="end"
|
||||
></u-count-to>
|
||||
</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="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">目标值</view>
|
||||
<u-subsection :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">滚动时间</view>
|
||||
<u-subsection current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">显示小数</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">字体加粗</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="boldChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startVal: 0,
|
||||
endVal: 608,
|
||||
separator: ',',
|
||||
decimals: 0,
|
||||
duration: 2000,
|
||||
autoplay: false,
|
||||
useEasing: true,
|
||||
current: 3,
|
||||
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
|
||||
bold: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
endValChange(index) {
|
||||
this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
|
||||
this.reset();
|
||||
this.start();
|
||||
},
|
||||
durationChange(index) {
|
||||
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
|
||||
},
|
||||
boldChange(index) {
|
||||
this.bold = !!!index;
|
||||
},
|
||||
decimalsChange(index) {
|
||||
this.decimals = index == 0 ? 2 : 0;
|
||||
},
|
||||
statusChange(index) {
|
||||
this.current = index;
|
||||
if (index == 0) {
|
||||
this.start();
|
||||
} else if (index == 1) {
|
||||
this.stop();
|
||||
} else if (index == 2) {
|
||||
this.resume();
|
||||
} else {
|
||||
this.reset();
|
||||
}
|
||||
},
|
||||
end() {
|
||||
this.current = 3;
|
||||
this.$refs.uToast.show({
|
||||
type: 'warning',
|
||||
title: '滚动结束'
|
||||
});
|
||||
},
|
||||
start() {
|
||||
this.current = 0;
|
||||
this.isStop = true;
|
||||
this.$refs.uCountTo.start();
|
||||
},
|
||||
stop() {
|
||||
this.$refs.uCountTo.stop();
|
||||
},
|
||||
resume() {
|
||||
if (!this.isStop) {
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '请开始并暂停后才能继续'
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.current = 3;
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$refs.uCountTo.resume();
|
||||
},
|
||||
reset() {
|
||||
this.$refs.uCountTo.reset();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.count-to-demo {
|
||||
text-align: 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,145 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-row :justify="justify" @click="rowClick">
|
||||
<u-col :span="span" :offset="offset" @click="click" stop>
|
||||
<view class="demo-layout bg-purple-dark">
|
||||
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="span" :offset="offset">
|
||||
<view class="demo-layout bg-purple-dark">
|
||||
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="span" :offset="offset">
|
||||
<view class="demo-layout bg-purple-dark">
|
||||
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</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">每个栅格占用栏数(演示共3个栅格)</view>
|
||||
<u-subsection :current="2" :list="[1, 2, 3, 4]" @change="spanChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">分栏偏移</view>
|
||||
<u-subsection :list="[0, 1, 2, 3]" @change="offsetChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">水平排列方式(微信小程序无效)</view>
|
||||
<u-subsection :list="['start', 'end', 'around', 'between']" @change="justifyChange"></u-subsection>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
span: 3,
|
||||
offset: 0,
|
||||
justify: 'start'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
console.log('col click');
|
||||
},
|
||||
rowClick() {
|
||||
console.log('row click');
|
||||
},
|
||||
spanChange(e) {
|
||||
switch (e) {
|
||||
case 0:
|
||||
this.span = 1;
|
||||
break;
|
||||
case 1:
|
||||
this.span = 2;
|
||||
break;
|
||||
case 2:
|
||||
this.span = 3;
|
||||
break;
|
||||
case 3:
|
||||
this.span = 4;
|
||||
break;
|
||||
case 4:
|
||||
this.span = 5;
|
||||
break;
|
||||
}
|
||||
},
|
||||
offsetChange(e) {
|
||||
switch (e) {
|
||||
case 0:
|
||||
this.offset = 0;
|
||||
break;
|
||||
case 1:
|
||||
this.offset = 1;
|
||||
break;
|
||||
case 2:
|
||||
this.offset = 2;
|
||||
break;
|
||||
case 3:
|
||||
this.offset = 3;
|
||||
break;
|
||||
}
|
||||
},
|
||||
justifyChange(e) {
|
||||
switch (e) {
|
||||
case 0:
|
||||
this.justify = 'start';
|
||||
break;
|
||||
case 1:
|
||||
this.justify = 'end';
|
||||
break;
|
||||
case 2:
|
||||
this.justify = 'around';
|
||||
break;
|
||||
case 3:
|
||||
this.justify = 'between';
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.demo-layout {
|
||||
height: 70rpx;
|
||||
border-radius: 8rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
|
||||
// H5中，电脑端文档演示时，可能会导致演示块挤出边界，特别处理。
|
||||
// 真实使用环境不会产生此问题
|
||||
/* #ifdef H5 */
|
||||
.u-demo-area /deep/ .u-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-link :color="color" :font-size="fontSize" :under-line="underLine" :href="href">点此链接，跳转uView官网</u-link>
|
||||
</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="underLineChange"></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 {
|
||||
href: 'https://www.uviewui.com',
|
||||
underLine: true,
|
||||
fontSize: 28,
|
||||
color: '#2979ff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
underLineChange(index) {
|
||||
this.underLine = index == 0 ? true : false;
|
||||
},
|
||||
styleChange(index) {
|
||||
if(index == 0) {
|
||||
this.color = this.$u.color['tipsColor'];
|
||||
this.fontSize = 34;
|
||||
} else {
|
||||
this.color = this.$u.color['primary'];
|
||||
this.fontSize = 28;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<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-loadmore :status="status" :loadText="loadText"
|
||||
:icon-type="iconType" :is-dot="isDot" @loadmore="loadmore"/>
|
||||
</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="statusChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">自定义提示语</view>
|
||||
<u-subsection current="1" :list="['是', '否']" @change="loadTextChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">加载中图标样式</view>
|
||||
<u-subsection :list="['circle', 'flower']" @change="styleChange"></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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: 'loadmore',
|
||||
iconType: 'circle',
|
||||
isDot: false,
|
||||
loadText: {
|
||||
loadmore: '点击或上拉加载更多',
|
||||
loading: '正在加载...',
|
||||
nomore: '没有更多了'
|
||||
},
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
// 在此请求下一页
|
||||
},
|
||||
methods: {
|
||||
statusChange(index) {
|
||||
this.current = index;
|
||||
this.status = index == 0 ? 'loadmore' : index == 1 ? 'loading' : index == 2 ? 'loadmore' : 'nomore';
|
||||
},
|
||||
loadTextChange(index) {
|
||||
if(index == 0) {
|
||||
this.loadText = {
|
||||
loadmore: '用力往上拉',
|
||||
loading: '正在加载，请喝杯茶...',
|
||||
nomore: '我也是有底线的'
|
||||
}
|
||||
} else {
|
||||
this.loadText = {
|
||||
loadmore: '点击或上拉加载更多',
|
||||
loading: '正在加载...',
|
||||
nomore: '没有更多了'
|
||||
}
|
||||
}
|
||||
},
|
||||
styleChange(index) {
|
||||
this.current = 1;
|
||||
this.statusChange(1);
|
||||
this.iconType = index == 0 ? 'circle' : 'flower';
|
||||
},
|
||||
isDotChange(index) {
|
||||
this.current = 3;
|
||||
this.statusChange(3);
|
||||
this.isDot = index == 0 ? true : false;
|
||||
},
|
||||
// 点击组件，触发加载更多事件(status为'loadmore'状态下才触发)
|
||||
loadmore() {
|
||||
this.$refs.uToast.show({
|
||||
title: '点击触发加载更多',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</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,97 @@
|
|||
<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-message-input :mode="mode" :maxlength="maxlength" :value="value"
|
||||
:breathe="breathe" :bold="bold" @finish="finish" :dot-fill="dotFill"></u-message-input>
|
||||
</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="[4, 5, 6]" @change="maxLengthChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="u-item-title">初始值(为满足演示需要，微信小程序切换会有抖动，非性能问题)</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="u-item-title">初始值</view>
|
||||
<!-- #endif -->
|
||||
<u-subsection :list="['空', '23', '678']" @change="valueChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">呼吸灯效果</view>
|
||||
<u-subsection :list="['是', '否']" @change="breatheChange"></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 current="1" :list="['是', '否']" @change="dotFillChange"></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mode: 'box',
|
||||
maxlength: 4,
|
||||
value: '',
|
||||
bold: true,
|
||||
breathe: true,
|
||||
dotFill: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
this.mode = index == 0 ? 'box' : index == 1 ? 'bottomLine' : 'middleLine';
|
||||
},
|
||||
maxLengthChange(index) {
|
||||
this.maxlength = index == 0 ? 4 : index == 1 ? 5 : 6;
|
||||
},
|
||||
valueChange(index) {
|
||||
this.value = index == 0 ? '' : index == 1 ? '23' : '678';
|
||||
},
|
||||
breatheChange(index) {
|
||||
this.breathe = index == 0 ? true : false;
|
||||
},
|
||||
boldChange(index) {
|
||||
this.bold = index == 0 ? true : false;
|
||||
},
|
||||
dotFillChange(index) {
|
||||
this.dotFill = index == 0 ? true : false;
|
||||
},
|
||||
finish(value) {
|
||||
this.$refs.uToast.show({
|
||||
title: '输入完成，值为：' + value,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</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,88 @@
|
|||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
<view class="u-demo-title">演示效果</view>
|
||||
<view class="u-demo-area">
|
||||
<u-subsection v-if="change" :bold="bold" :active-color="activeColor" :current="current" :mode="mode" :list="['代付款', '待收货', '待评价']"></u-subsection>
|
||||
</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 mode="button" :list="['button', 'subsection']" @change="modeChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">Current值</view>
|
||||
<u-subsection mode="button" :list="[0, 1, 2]" @change="currentChange"></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 {
|
||||
mode: 'button',
|
||||
current: 0,
|
||||
activeColor: this.$u.color['warning'],
|
||||
bold: true,
|
||||
change: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(e) {
|
||||
switch(e) {
|
||||
case 0:
|
||||
this.mode = 'button';break;
|
||||
case 1:
|
||||
this.mode = 'subsection';break;
|
||||
}
|
||||
this.change = false;
|
||||
this.$nextTick(() => {
|
||||
this.change = true;
|
||||
})
|
||||
},
|
||||
currentChange(e) {
|
||||
this.current = e;
|
||||
},
|
||||
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-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
|
||||
export default [{
|
||||
groupName: '基础组件',
|
||||
groupName_en: 'Basic components',
|
||||
list: [{
|
||||
path: '/pages/componentsC/color/index',
|
||||
icon: 'color',
|
||||
title: 'Color 色彩',
|
||||
title_en: 'Color',
|
||||
}, {
|
||||
path: '/pages/componentsA/icon/index',
|
||||
icon: 'icon',
|
||||
title: 'Icon 图标',
|
||||
title_en: 'Icon',
|
||||
},{
|
||||
path: '/pages/componentsB/image/index',
|
||||
icon: 'image',
|
||||
title: 'Image 图片',
|
||||
title_en: 'Image',
|
||||
}, {
|
||||
path: '/pages/componentsC/button/index',
|
||||
icon: 'button',
|
||||
title: 'Button 按钮',
|
||||
title_en: 'Button',
|
||||
}, {
|
||||
path: '/pages/componentsC/layout/index',
|
||||
icon: 'layout',
|
||||
title: 'Layout 布局',
|
||||
title_en: 'Layout',
|
||||
}, {
|
||||
path: '/pages/componentsC/cell/index',
|
||||
icon: 'cell',
|
||||
title: 'Cell 单元格',
|
||||
title_en: 'Cell',
|
||||
}, {
|
||||
path: '/pages/componentsC/badge/index',
|
||||
icon: 'badge',
|
||||
title: 'Badge 徽标数',
|
||||
title_en: 'Badge',
|
||||
}, {
|
||||
path: '/pages/componentsA/tag/index',
|
||||
icon: 'tag',
|
||||
title: 'Tag 标签',
|
||||
title_en: 'Tag',
|
||||
}]
|
||||
},
|
||||
{
|
||||
groupName: '表单组件',
|
||||
groupName_en: 'Form components',
|
||||
list: [{
|
||||
path: '/pages/componentsA/form/index',
|
||||
icon: 'form',
|
||||
title: 'Form 表单',
|
||||
title_en: 'Form',
|
||||
}, {
|
||||
path: '/pages/componentsA/calendar/index',
|
||||
icon: 'calendar',
|
||||
title: 'Calendar 日历',
|
||||
title_en: 'Calendar',
|
||||
}, {
|
||||
path: '/pages/componentsA/select/index',
|
||||
icon: 'select',
|
||||
title: 'Select 列选择器',
|
||||
title_en: 'Select',
|
||||
}, {
|
||||
path: '/pages/componentsA/keyboard/index',
|
||||
icon: 'keyboard',
|
||||
title: 'Keyboard 键盘',
|
||||
title_en: 'Keyboard',
|
||||
}, {
|
||||
path: '/pages/componentsB/picker/index',
|
||||
icon: 'picker',
|
||||
title: 'Picker 选择器',
|
||||
title_en: 'Picker',
|
||||
}, {
|
||||
path: '/pages/componentsB/rate/index',
|
||||
icon: 'rate',
|
||||
title: 'Rate 评分',
|
||||
title_en: 'Rate',
|
||||
}, {
|
||||
path: '/pages/componentsB/search/index',
|
||||
icon: 'search',
|
||||
title: 'Search 搜索',
|
||||
title_en: 'Search',
|
||||
}, {
|
||||
path: '/pages/componentsC/numberBox/index',
|
||||
icon: 'numberBox',
|
||||
title: 'NumberBox 步进器',
|
||||
title_en: 'NumberBox',
|
||||
}, {
|
||||
path: '/pages/componentsB/upload/index',
|
||||
icon: 'upload',
|
||||
title: 'Upload 上传',
|
||||
title_en: 'Upload',
|
||||
}, {
|
||||
path: '/pages/componentsA/verificationCode/index',
|
||||
icon: 'verificationCode',
|
||||
title: 'VerificationCode 验证码倒计时',
|
||||
title_en: 'VerificationCode',
|
||||
}, {
|
||||
path: '/pages/componentsA/field/index',
|
||||
icon: 'field',
|
||||
title: 'Field 输入框',
|
||||
title_en: 'Field',
|
||||
}, {
|
||||
path: '/pages/componentsB/checkbox/index',
|
||||
icon: 'checkbox',
|
||||
title: 'Checkbox 复选框',
|
||||
title_en: 'Checkbox',
|
||||
}, {
|
||||
path: '/pages/componentsB/radio/index',
|
||||
icon: 'radio',
|
||||
title: 'Radio 单选框',
|
||||
title_en: 'Radio',
|
||||
}, {
|
||||
path: '/pages/componentsB/switch/index',
|
||||
icon: 'switch',
|
||||
title: 'Switch 开关选择器',
|
||||
title_en: 'Switch',
|
||||
}, {
|
||||
path: '/pages/componentsA/slider/index',
|
||||
icon: 'slider',
|
||||
title: 'Slider 滑动选择器',
|
||||
title_en: 'Slider',
|
||||
}]
|
||||
}, {
|
||||
groupName: '数据组件',
|
||||
groupName_en: 'Data components',
|
||||
list: [{
|
||||
path: '/pages/componentsC/progress/index',
|
||||
icon: 'progress',
|
||||
title: 'Progress 进度条',
|
||||
title_en: 'Progress',
|
||||
}, {
|
||||
path: '/pages/componentsB/table/index',
|
||||
icon: 'table',
|
||||
title: 'Table 表格',
|
||||
title_en: 'Table',
|
||||
}, {
|
||||
path: '/pages/componentsC/countDown/index',
|
||||
icon: 'countDown',
|
||||
title: 'CountDown 倒计时',
|
||||
title_en: 'CountDown',
|
||||
}, {
|
||||
path: '/pages/componentsC/countTo/index',
|
||||
icon: 'countTo',
|
||||
title: 'CountTo 数字滚动',
|
||||
title_en: 'CountTo',
|
||||
}]
|
||||
}, {
|
||||
groupName: '反馈组件',
|
||||
groupName_en: 'Feedback components',
|
||||
list: [{
|
||||
path: '/pages/componentsC/actionSheet/index',
|
||||
icon: 'actionSheet',
|
||||
title: 'ActionSheet 操作菜单',
|
||||
title_en: 'ActionSheet',
|
||||
}, {
|
||||
path: '/pages/componentsC/alertTips/index',
|
||||
icon: 'alertTips',
|
||||
title: 'AlertTips 警告提示',
|
||||
title_en: 'AlertTips',
|
||||
}, {
|
||||
path: '/pages/componentsA/toast/index',
|
||||
icon: 'toast',
|
||||
title: 'Toast 消息提示',
|
||||
title_en: 'Toast',
|
||||
}, {
|
||||
path: '/pages/componentsB/noticeBar/index',
|
||||
icon: 'noticeBar',
|
||||
title: 'NoticeBar 滚动通知',
|
||||
title_en: 'NoticeBar',
|
||||
}, {
|
||||
path: '/pages/componentsA/topTips/index',
|
||||
icon: 'topTips',
|
||||
title: 'TopTips 顶部提示',
|
||||
title_en: 'TopTips',
|
||||
}, {
|
||||
path: '/pages/componentsB/swipeAction/index',
|
||||
icon: 'swipeAction',
|
||||
title: 'SwipeAction 滑动单元格',
|
||||
title_en: 'SwipeAction',
|
||||
}, {
|
||||
path: '/pages/componentsC/collapse/index',
|
||||
icon: 'collapse',
|
||||
title: 'Collapse 折叠面板',
|
||||
title_en: 'Collapse',
|
||||
}, {
|
||||
path: '/pages/componentsC/popup/index',
|
||||
icon: 'popup',
|
||||
title: 'Popup 弹出层',
|
||||
title_en: 'Popup',
|
||||
}, {
|
||||
path: '/pages/componentsA/modal/index',
|
||||
icon: 'modal',
|
||||
title: 'Modal 模态框',
|
||||
title_en: 'Modal',
|
||||
}, {
|
||||
path: '/pages/componentsA/fullScreen/index',
|
||||
icon: 'pressingScreen',
|
||||
title: 'fullScreen 压窗屏',
|
||||
title_en: 'fullScreen',
|
||||
}]
|
||||
}, {
|
||||
groupName: '布局组件',
|
||||
groupName_en: 'Layout components',
|
||||
list: [{
|
||||
path: '/pages/componentsB/line/index',
|
||||
icon: 'line',
|
||||
title: 'Line 线条',
|
||||
title_en: 'Line',
|
||||
}, {
|
||||
path: '/pages/componentsB/card/index',
|
||||
icon: 'card',
|
||||
title: 'Card 卡片',
|
||||
title_en: 'Card',
|
||||
}, {
|
||||
path: '/pages/componentsC/mask/index',
|
||||
icon: 'mask',
|
||||
title: 'Mask 遮罩层',
|
||||
title_en: 'Mask',
|
||||
},
|
||||
// #ifndef MP-TOUTIAO
|
||||
{
|
||||
path: '/pages/componentsA/noNetwork/index',
|
||||
icon: 'noNetwork',
|
||||
title: 'NoNetwork 无网络提示',
|
||||
title_en: 'NoNetwork',
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
path: '/pages/componentsC/grid/index',
|
||||
icon: 'grid',
|
||||
title: 'Grid 宫格布局',
|
||||
title_en: 'Grid',
|
||||
}, {
|
||||
path: '/pages/componentsB/swiper/index',
|
||||
icon: 'swiper',
|
||||
title: 'Swiper 轮播图',
|
||||
title_en: 'Swiper',
|
||||
}, {
|
||||
path: '/pages/componentsA/timeLine/index',
|
||||
icon: 'timeLine',
|
||||
title: 'TimeLine 时间轴',
|
||||
title_en: 'TimeLine',
|
||||
}, {
|
||||
path: '/pages/componentsB/skeleton/index',
|
||||
icon: 'skeleton',
|
||||
title: 'Skeleton 骨架屏',
|
||||
title_en: 'Skeleton',
|
||||
}, {
|
||||
path: '/pages/componentsB/sticky/index',
|
||||
icon: 'sticky',
|
||||
title: 'Sticky 吸顶',
|
||||
title_en: 'Sticky',
|
||||
},
|
||||
// #ifndef MP-TOUTIAO
|
||||
{
|
||||
path: '/pages/componentsB/waterfall/index',
|
||||
icon: 'waterfall',
|
||||
title: 'Waterfall 瀑布流',
|
||||
title_en: 'Waterfall',
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
path: '/pages/componentsB/divider/index',
|
||||
icon: 'divider',
|
||||
title: 'Divider 分割线',
|
||||
title_en: 'Divider',
|
||||
}]
|
||||
}, {
|
||||
groupName: '导航组件',
|
||||
groupName_en: 'Navigation components',
|
||||
list: [{
|
||||
path: '/pages/componentsB/dropdown/index',
|
||||
icon: 'dropdown',
|
||||
title: 'Dropdown 下拉菜单',
|
||||
title_en: 'Dropdown',
|
||||
},{
|
||||
path: '/pages/componentsB/tabbar/index',
|
||||
icon: 'tabbar',
|
||||
title: 'Tabbar 底部导航栏',
|
||||
title_en: 'Tabbar',
|
||||
},{
|
||||
path: '/pages/componentsA/backTop/index',
|
||||
icon: 'backTop',
|
||||
title: 'BackTop 返回顶部',
|
||||
title_en: 'BackTop',
|
||||
},{
|
||||
path: '/pages/componentsA/navbar/index',
|
||||
icon: 'navbar',
|
||||
title: 'Navbar 导航栏',
|
||||
title_en: 'Navbar',
|
||||
}, {
|
||||
path: '/pages/componentsA/tabs/index',
|
||||
icon: 'tabs',
|
||||
title: 'Tabs 标签',
|
||||
title_en: 'Tabs',
|
||||
},
|
||||
// #ifndef MP-ALIPAY
|
||||
{
|
||||
path: '/pages/template/order/index',
|
||||
icon: 'tabsSwiper',
|
||||
title: 'TabsSwiper 全屏选项卡',
|
||||
title_en: 'TabsSwiper',
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
path: '/pages/componentsC/subsection/index',
|
||||
icon: 'subsection',
|
||||
title: 'Subsection 分段器',
|
||||
title_en: 'Subsection',
|
||||
}, {
|
||||
path: '/pages/componentsA/indexList/index',
|
||||
icon: 'indexList',
|
||||
title: 'IndexList 索引列表',
|
||||
title_en: 'IndexList',
|
||||
}, {
|
||||
path: '/pages/componentsB/steps/index',
|
||||
icon: 'steps',
|
||||
title: 'Steps 步骤条',
|
||||
title_en: 'Steps',
|
||||
}, {
|
||||
path: '/pages/componentsA/empty/index',
|
||||
icon: 'empty',
|
||||
title: 'Empty 内容为空',
|
||||
title_en: 'Empty',
|
||||
}, {
|
||||
path: '/pages/componentsC/section/index',
|
||||
icon: 'section',
|
||||
title: 'Section 查看更多',
|
||||
title_en: 'Section',
|
||||
}]
|
||||
}, {
|
||||
groupName: '其他组件',
|
||||
groupName_en: 'Other components',
|
||||
list: [{
|
||||
path: '/pages/componentsA/parse/index',
|
||||
icon: 'parse',
|
||||
title: 'Parse 富文本解析器',
|
||||
title_en: 'Parse',
|
||||
},{
|
||||
path: '/pages/componentsC/messageInput/index',
|
||||
icon: 'messageInput',
|
||||
title: 'MessageInput 验证码输入',
|
||||
title_en: 'MessageInput',
|
||||
}, {
|
||||
path: '/pages/componentsA/avatarCropper/index',
|
||||
icon: 'avatarCropper',
|
||||
title: 'AvatarCropper 头像裁剪',
|
||||
title_en: 'AvatarCropper',
|
||||
}, {
|
||||
path: '/pages/componentsC/loadmore/index',
|
||||
icon: 'loadmore',
|
||||
title: 'Loadmore 加载更多',
|
||||
title_en: 'Loadmore',
|
||||
}, {
|
||||
path: '/pages/componentsB/readMore/index',
|
||||
icon: 'readMore',
|
||||
title: 'ReadMore 展开阅读更多',
|
||||
title_en: 'ReadMore',
|
||||
}, {
|
||||
path: '/pages/componentsA/lazyLoad/index',
|
||||
icon: 'lazyLoad',
|
||||
title: 'LazyLoad 懒加载',
|
||||
title_en: 'LazyLoad',
|
||||
}, {
|
||||
path: '/pages/componentsC/gap/index',
|
||||
icon: 'gap',
|
||||
title: 'Gap 间隔槽',
|
||||
title_en: 'Gap',
|
||||
}, {
|
||||
path: '/pages/componentsA/avatar/index',
|
||||
icon: 'avatar',
|
||||
title: 'Avatar 头像',
|
||||
title_en: 'Avatar',
|
||||
}, {
|
||||
path: '/pages/componentsC/link/index',
|
||||
icon: 'link',
|
||||
title: 'Link 超链接',
|
||||
title_en: 'Link',
|
||||
}, {
|
||||
path: '/pages/componentsB/loading/index',
|
||||
icon: 'loading',
|
||||
title: 'Loading 加载动画',
|
||||
title_en: 'Loading',
|
||||
}]
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<page-nav :desc="desc" title="nav.components"></page-nav>
|
||||
<view class="list-wrap">
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
|
||||
<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
||||
v-for="(item1, index1) in item.list" :key="index1">
|
||||
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<u-gap height="70"></u-gap>
|
||||
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from "./components.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: list,
|
||||
//desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用。',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
desc() {
|
||||
return this.$t('components.desc');
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t('nav.components')
|
||||
});
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
getGroupTitle(item) {
|
||||
return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
|
||||
},
|
||||
getFieldTitle(item) {
|
||||
return this.$i18n.locale == 'zh' ? item.title : item.title_en
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* page {
|
||||
background-color: rgb(240, 242, 244);
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
export default [
|
||||
{
|
||||
groupName: '网络',
|
||||
groupName_en: 'Network',
|
||||
list: [
|
||||
{
|
||||
path: 'http',
|
||||
icon: 'http',
|
||||
title: 'Http 请求',
|
||||
title_en: 'Http',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '全局变量',
|
||||
groupName_en: 'Global variable',
|
||||
list: [
|
||||
{
|
||||
path: 'globalVariable',
|
||||
icon: 'globalVariable',
|
||||
title: 'GlobalVariable 全局变量',
|
||||
title_en: 'GlobalVariable',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '工具库',
|
||||
groupName_en: 'Tool library',
|
||||
list: [
|
||||
{
|
||||
path: 'debounce',
|
||||
icon: 'debounce',
|
||||
title: 'Throttle | Debounce 节流防抖',
|
||||
title_en: 'Throttle | Debounce',
|
||||
},
|
||||
{
|
||||
path: 'deepMerge',
|
||||
icon: 'deepMerge',
|
||||
title: 'DeepMerge 对象深度合并',
|
||||
title_en: 'DeepMerge',
|
||||
},{
|
||||
path: 'deepClone',
|
||||
icon: 'deepClone',
|
||||
title: 'DeepClone 对象深度克隆',
|
||||
title_en: 'DeepClone',
|
||||
},
|
||||
{
|
||||
path: 'timeFormat',
|
||||
icon: 'timeFormat',
|
||||
title: 'TimeFormat 时间格式化',
|
||||
title_en: 'TimeFormat',
|
||||
},{
|
||||
path: 'timeFrom',
|
||||
icon: 'timeFrom',
|
||||
title: 'TimeFrom 多久之前',
|
||||
title_en: 'TimeFrom',
|
||||
},{
|
||||
path: 'guid',
|
||||
icon: 'guid',
|
||||
title: 'Guid 全局唯一id',
|
||||
title_en: 'Guid',
|
||||
},{
|
||||
path: 'route',
|
||||
icon: 'route',
|
||||
title: 'Route 路由跳转',
|
||||
title_en: 'Route',
|
||||
},{
|
||||
path: 'randomArray',
|
||||
icon: 'randomArray',
|
||||
title: 'RandomArray 数组乱序',
|
||||
title_en: 'RandomArray',
|
||||
},{
|
||||
path: 'colorSwitch',
|
||||
icon: 'colorSwitch',
|
||||
title: 'ColorSwitch 颜色转换',
|
||||
title_en: 'ColorSwitch',
|
||||
},{
|
||||
path: 'color',
|
||||
icon: 'color',
|
||||
title: 'Color 颜色值',
|
||||
title_en: 'Color',
|
||||
},{
|
||||
path: 'queryParams',
|
||||
icon: 'queryParams',
|
||||
title: 'QueryParams 对象转URL参数',
|
||||
title_en: 'QueryParams',
|
||||
},{
|
||||
path: 'test',
|
||||
icon: 'test',
|
||||
title: 'Test 规则校验',
|
||||
title_en: 'Test',
|
||||
},{
|
||||
path: 'md5',
|
||||
icon: 'md5',
|
||||
title: 'Md5 md5加密',
|
||||
title_en: 'Md5',
|
||||
},{
|
||||
path: 'random',
|
||||
icon: 'random',
|
||||
title: 'Random 随机数值',
|
||||
title_en: 'Random',
|
||||
},{
|
||||
path: 'trim',
|
||||
icon: 'trim',
|
||||
title: 'Trim 去除空格',
|
||||
title_en: 'Trim',
|
||||
},{
|
||||
path: 'getRect',
|
||||
icon: 'getRect',
|
||||
title: 'GetRect 节点信息',
|
||||
title_en: 'GetRect',
|
||||
},{
|
||||
path: 'mpShare',
|
||||
icon: 'mpShare',
|
||||
title: 'MpShare 小程序分享',
|
||||
title_en: 'MpShare',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<page-nav :desc="desc" title="nav.js"></page-nav>
|
||||
<view class="list-wrap">
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
|
||||
<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
||||
v-for="(item1, index1) in item.list" :key="index1">
|
||||
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<u-gap height="70"></u-gap>
|
||||
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from "./js.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: list,
|
||||
// desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
desc() {
|
||||
return this.$t('js.desc');
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t('nav.js')
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: '/pages/library/' + path + '/index'
|
||||
})
|
||||
},
|
||||
getGroupTitle(item) {
|
||||
return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
|
||||
},
|
||||
getFieldTitle(item) {
|
||||
return this.$i18n.locale == 'zh' ? item.title : item.title_en
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* page {
|
||||
background-color: rgb(240, 242, 244);
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
export default [
|
||||
{
|
||||
groupName: '部件',
|
||||
groupName_en: 'Parts',
|
||||
list: [
|
||||
{
|
||||
path: 'coupon',
|
||||
icon: 'coupon',
|
||||
title: 'Coupon 优惠券',
|
||||
title_en: 'Coupon',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '页面',
|
||||
groupName_en: 'Page',
|
||||
list: [
|
||||
{
|
||||
path: '/pages/template/wxCenter/index',
|
||||
icon: 'wxCenter',
|
||||
title: 'WxCenter 仿微信个人中心',
|
||||
title_en: 'WxCenter',
|
||||
},
|
||||
// {
|
||||
// path: '/pages/template/douyin/index',
|
||||
// icon: 'douyin',
|
||||
// title: 'Douyin 仿抖音',
|
||||
// },
|
||||
{
|
||||
path: '/pages/template/keyboardPay/index',
|
||||
icon: 'keyboardPay',
|
||||
title: 'KeyboardPay 自定义键盘支付模板',
|
||||
title_en: 'KeyboardPay',
|
||||
},
|
||||
{
|
||||
path: '/pages/template/mallMenu/index1',
|
||||
icon: 'mall_menu_1',
|
||||
title: 'MallMenu 垂直分类(左右独立)',
|
||||
title_en: 'MallMenu 1',
|
||||
},{
|
||||
path: '/pages/template/mallMenu/index2',
|
||||
icon: 'mall_menu_2',
|
||||
title: 'MallMenu 垂直分类(左右联动)',
|
||||
title_en: 'MallMenu 2',
|
||||
},{
|
||||
path: 'submitBar',
|
||||
icon: 'submitBar',
|
||||
title: 'SubmitBar 提交订单栏',
|
||||
title_en: 'SubmitBar',
|
||||
},{
|
||||
path: 'comment',
|
||||
icon: 'comment',
|
||||
title: 'Comment 评论列表',
|
||||
title_en: 'Comment',
|
||||
},{
|
||||
path: 'order',
|
||||
icon: 'order',
|
||||
title: 'Order 订单列表',
|
||||
title_en: 'Order',
|
||||
},{
|
||||
path: 'login',
|
||||
icon: 'login',
|
||||
title: 'Login 登录界面',
|
||||
title_en: 'Login',
|
||||
},{
|
||||
path: 'address',
|
||||
icon: 'address',
|
||||
title: 'Address 收货地址',
|
||||
title_en: 'Address',
|
||||
},{
|
||||
path: 'citySelect',
|
||||
icon: 'citySelect',
|
||||
title: 'CitySelect 城市选择',
|
||||
title_en: 'CitySelect',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<page-nav :desc="desc" title="nav.template"></page-nav>
|
||||
<view class="list-wrap">
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
|
||||
<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
||||
v-for="(item1, index1) in item.list" :key="index1">
|
||||
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<u-gap height="70"></u-gap>
|
||||
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from "./template.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: list,
|
||||
// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
desc() {
|
||||
return this.$t('template.desc');
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t('nav.template')
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: path.indexOf('/page') == 0 ? path : '/pages/template/' + path + '/index'
|
||||
})
|
||||
},
|
||||
getGroupTitle(item) {
|
||||
return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
|
||||
},
|
||||
getFieldTitle(item) {
|
||||
return this.$i18n.locale == 'zh' ? item.title : item.title_en
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* page {
|
||||
background-color: rgb(240, 242, 244);
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<u-swiper @change="change" :height="250" :list="swiper_list" :title="swtitle" :effect3d="effect3d"
|
||||
:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
|
||||
|
||||
|
||||
<u-card v-for="(item, index) in myinspecttaskList" v-bind:key="index" :title="item.name" margin="6rpx"
|
||||
:border="false" :foot-border-top="false" border-radius="2rpx" :head-style="headstyle"
|
||||
@body-click="taskClick" :index="item.id">
|
||||
<view class="" slot="body">
|
||||
<view class="u-body-item-title">
|
||||
<span style="color:blue;border:1rpx solid blue;margin-right:6rpx">{{item.state}}</span>
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="u-body-item">
|
||||
所属任务:
|
||||
<span>{{item.inspecttask_.name}}</span>
|
||||
</view>
|
||||
<view class="u-body-item">
|
||||
检查期限:
|
||||
<span>{{item.inspecttask_.start_date}}</span>至
|
||||
<span>{{item.inspecttask_.end_date}}</span>
|
||||
</view>
|
||||
<view class="u-body-item">
|
||||
涉及单位:
|
||||
<span style="color:blue;">{{item.depts_count}}</span>家
|
||||
巡查组:
|
||||
<span style="color:blue;">{{item.members.length}}</span>人
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiper_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: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
swtitle: false,
|
||||
mode: 'round',
|
||||
indicatorPos: 'bottomCenter',
|
||||
effect3d: true,
|
||||
test: '',
|
||||
myinspecttaskList:[],
|
||||
list: [{
|
||||
groupName: '最近任务',
|
||||
list: [{
|
||||
path: '/pages/example/js',
|
||||
title: '员工台账',
|
||||
},
|
||||
{
|
||||
path: '/pages/example/components',
|
||||
title: '放射源台账',
|
||||
}
|
||||
]
|
||||
}],
|
||||
title: '素胚勾勒出青花，笔锋浓转淡',
|
||||
subTitle: '2020-05-15',
|
||||
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||
headstyle:{"padding-top":"12rpx","padding-bottom":"12rpx"}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getMyInspectTask();
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
this.$u.api.getUserInfo().then(res => {
|
||||
|
||||
}).catch(e => {})
|
||||
},
|
||||
getMyInspectTask() {
|
||||
this.$u.api.getMyInspectTask({state:'执行中'}).then(res => {
|
||||
this.myinspecttaskList = res.data
|
||||
}).catch(e=>{})
|
||||
},
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
change() {
|
||||
|
||||
},
|
||||
click() {
|
||||
|
||||
},
|
||||
taskClick(index){
|
||||
console.log(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #ededed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-body-item-title{
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
.u-body-item{
|
||||
margin-top:4rpx;
|
||||
span{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<view class="wrap">
|
||||
<u-swiper @change="change" :height="250" :list="swiper_list" :title="title" :effect3d="effect3d" :indicator-pos="indicatorPos"
|
||||
:mode="mode" :interval="3000" @click="click"></u-swiper>
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="item.groupName" v-for="(item, index) in list" :key="index">
|
||||
<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="item1.title" v-for="(item1, index1) in item.list"
|
||||
:key="index1">
|
||||
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiper_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: true,
|
||||
test: '',
|
||||
list: [{
|
||||
groupName: '个人辐射信息',
|
||||
list: [{
|
||||
path: '/pages/example/components',
|
||||
icon: 'color',
|
||||
title: '个人培训记录',
|
||||
},
|
||||
{
|
||||
path: '/pages/example/components',
|
||||
icon: 'color',
|
||||
title: '个人剂量检测',
|
||||
}]
|
||||
},
|
||||
{
|
||||
groupName: '单位辐射信息',
|
||||
list: [{
|
||||
path: '/pages/example/js',
|
||||
icon: 'color',
|
||||
title: '员工台账',
|
||||
},
|
||||
{
|
||||
path: '/pages/example/components',
|
||||
icon: 'color',
|
||||
title: '放射源台账',
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getUserInfo();
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
this.$u.api.getUserInfo().then(res => {
|
||||
|
||||
}).catch(e=>{})
|
||||
},
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
change() {
|
||||
|
||||
},
|
||||
click() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #ededed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<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" style="text-align: left;">
|
||||
此处演示为通过JS调用框架内置颜色值，此外还可以通过scss变量调用。
|
||||
</view>
|
||||
<view class="u-demo-result-line" :style="{color: color, backgroundColor: '#ffffff'}">
|
||||
晓镜但愁云鬓改，夜吟应觉月光寒
|
||||
</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="['primary', 'success', 'error', 'warning', 'info']" @change="modeChange"></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 {
|
||||
color: this.$u.color['primary'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
modeChange(index) {
|
||||
let colorName = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
|
||||
this.color = this.$u.color[colorName];
|
||||
},
|
||||
colorChange(index) {
|
||||
this.color = index == 0 ? '#303133' : index == 1 ? '#606266' : index == 2 ? '#909399' : index == 3 ? '#c0c4cc' : '#e4e7ed';
|
||||
},
|
||||
getResult() {
|
||||
this.result = this.$u.trim(this.string, this.pos);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<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">
|
||||
{{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">GRB转HEX</view>
|
||||
<u-subsection :list="['rgb(12,57,231)', 'rgb(15,148,32)', 'rgb(91,52,210)']" @change="rgbToHexChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">HEX转GRB</view>
|
||||
<u-subsection :list="['#0edc8a', '#d0a73c', '#3308dd']" @change="hexToRgbChange"></u-subsection>
|
||||
</view>
|
||||
<view class="u-config-item">
|
||||
<view class="u-item-title">颜色渐变(rgb(21,21,21)-rgb(56,56,56)，分10份)</view>
|
||||
<u-button @click="colorGradientChange">执行</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.result = this.$u.rgbToHex('rgb(12,57,231)')
|
||||
},
|
||||
methods: {
|
||||
rgbToHexChange(index) {
|
||||
let color = index == 0 ? 'rgb(12,57,231)' : index == 1 ? 'rgb(15,148,32)' : 'rgb(91,52,210)';
|
||||
this.result = this.$u.rgbToHex(color)
|
||||
},
|
||||
hexToRgbChange(index) {
|
||||
let color = index == 0 ? '#0edc8a' : index == 1 ? '#d0a73c' : '#3308dd';
|
||||
this.result = this.$u.hexToRgb(color)
|
||||
},
|
||||
colorGradientChange(index) {
|
||||
this.result = JSON.stringify(this.$u.colorGradient('rgb(21,21,21)', 'rgb(56,56,56)', 10))
|
||||
},
|
||||
getResult() {
|
||||
this.result = this.$u.guid(this.length, this.firstU, this.radix);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-demo {}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue