Commit 41d9c891 authored by 北桥's avatar 北桥

ref: uView cli demo

parent d7dc846b
[*]
#缩进风格:空格
indent_style = tab
#缩进大小2
indent_size = 4
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = ''
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = ''
src/unpackage
src/node_modules
src/uview-ui
......@@ -21,5 +21,3 @@ yarn-error.log*
*.njsproj
*.sln
*.sw*
package-lock.json
MIT License
Copyright (c) 2020 www.uviewui.com
Copyright (c) 2023 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
......@@ -18,4 +18,4 @@ 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.
\ No newline at end of file
SOFTWARE.
# uview-cli
# uniapp-cli-demo
## Project setup
```
npm install
yarn install
```
### Compiles and hot-reloads for development
```
npm run serve
yarn serve
```
### Compiles and minifies for production
```
npm run build
yarn build
```
### Customize configuration
......
const webpack = require('webpack')
const plugins = []
if (process.env.UNI_OPT_TREESHAKINGNG) {
......@@ -34,7 +35,7 @@ if (
}
}
])
} catch (e) {}
} catch (e) { }
}
process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
......@@ -49,15 +50,32 @@ process.UNI_LIBRARIES.forEach(libraryName => {
}
])
})
module.exports = {
if (process.env.UNI_PLATFORM !== 'h5') {
plugins.push('@babel/plugin-transform-runtime')
}
const config = {
presets: [
[
'@vue/app',
{
modules: 'commonjs',
modules: webpack.version[0] > 4 ? 'auto' : 'commonjs',
useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
}
]
],
plugins
}
const UNI_H5_TEST = '**/@dcloudio/uni-h5/dist/index.umd.min.js'
if (process.env.NODE_ENV === 'production') {
config.overrides = [{
test: UNI_H5_TEST,
compact: true,
}]
} else {
config.ignore = [UNI_H5_TEST]
}
module.exports = config
This diff is collapsed.
{
"name": "uview-ui-cli",
"version": "0.1.0",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"keywords": [
"uview",
"uView",
"uni-app",
"uni-app ui",
"uniapp",
"uviewui",
"uview ui",
"uviewUI",
"uViewui",
"uViewUI",
"uView UI",
"uni ui",
"uni UI",
"uniapp ui",
"ui",
"UI框架",
"uniapp ui框架",
"uniapp UI"
],
"author": "uView",
"license": "MIT",
"scripts": {
"serve": "npm run dev:h5",
"build": "npm run build:h5",
"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
"build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
"build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
"build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
"build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
"build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
"build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
"build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
"build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
"dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
"dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
"dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
"dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
"dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
"dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
"dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
"dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
"serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
},
"dependencies": {
"@dcloudio/uni-app": "^2.0.2-3080720230703001",
"@dcloudio/uni-app-plus": "^2.0.2-3080720230703001",
"@dcloudio/uni-h5": "^2.0.2-3080720230703001",
"@dcloudio/uni-i18n": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-360": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-alipay": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-baidu": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-jd": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-kuaishou": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-lark": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-qq": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-toutiao": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-vue": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-weixin": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-xhs": "^2.0.2-3080720230703001",
"@dcloudio/uni-quickapp-native": "^2.0.2-3080720230703001",
"@dcloudio/uni-quickapp-webview": "^2.0.2-3080720230703001",
"@dcloudio/uni-stacktracey": "^2.0.2-3080720230703001",
"@dcloudio/uni-stat": "^2.0.2-3080720230703001",
"@vue/shared": "^3.0.0",
"core-js": "^3.8.3",
"flyio": "^0.6.2",
"vue": ">= 2.6.14 < 2.7",
"vuex": "^3.2.0"
},
"devDependencies": {
"@dcloudio/types": "^3.3.2",
"@dcloudio/uni-automator": "^2.0.2-3080720230703001",
"@dcloudio/uni-cli-i18n": "^2.0.2-3080720230703001",
"@dcloudio/uni-cli-shared": "^2.0.2-3080720230703001",
"@dcloudio/uni-helper-json": "*",
"@dcloudio/uni-migration": "^2.0.2-3080720230703001",
"@dcloudio/uni-template-compiler": "^2.0.2-3080720230703001",
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3080720230703001",
"@dcloudio/vue-cli-plugin-uni": "^2.0.2-3080720230703001",
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3080720230703001",
"@dcloudio/webpack-uni-mp-loader": "^2.0.2-3080720230703001",
"@dcloudio/webpack-uni-pages-loader": "^2.0.2-3080720230703001",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.11.0",
"cross-env": "^7.0.2",
"jest": "^25.4.0",
"mini-types": "*",
"miniprogram-api-typings": "*",
"postcss-comment": "^2.0.0",
"vue-template-compiler": ">= 2.6.14 < 2.7",
"node-sass": "^7.0.3",
"sass-loader": "^8.0.2"
},
"browserslist": [
"Android >= 4.4",
"ios >= 9"
],
"uni-app": {
"scripts": {}
}
"name": "uniapp-cli-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm run dev:h5",
"build": "npm run build:h5",
"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
"build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
"build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
"build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
"build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
"build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
"build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
"build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
"build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
"dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
"dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
"dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
"dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
"dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
"dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
"dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
"dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
"serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
},
"dependencies": {
"@dcloudio/uni-app": "^2.0.2-3080720230703001",
"@dcloudio/uni-app-plus": "^2.0.2-3080720230703001",
"@dcloudio/uni-h5": "^2.0.2-3080720230703001",
"@dcloudio/uni-i18n": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-360": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-alipay": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-baidu": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-jd": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-kuaishou": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-lark": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-qq": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-toutiao": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-vue": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-weixin": "^2.0.2-3080720230703001",
"@dcloudio/uni-mp-xhs": "^2.0.2-3080720230703001",
"@dcloudio/uni-quickapp-native": "^2.0.2-3080720230703001",
"@dcloudio/uni-quickapp-webview": "^2.0.2-3080720230703001",
"@dcloudio/uni-stacktracey": "^2.0.2-3080720230703001",
"@dcloudio/uni-stat": "^2.0.2-3080720230703001",
"@vue/shared": "^3.0.0",
"core-js": "^3.8.3",
"flyio": "^0.6.2",
"uview-ui": "^1.8.8",
"vue": ">= 2.6.14 < 2.7",
"vuex": "^3.2.0"
},
"devDependencies": {
"@dcloudio/types": "^3.3.2",
"@dcloudio/uni-automator": "^2.0.2-3080720230703001",
"@dcloudio/uni-cli-i18n": "^2.0.2-3080720230703001",
"@dcloudio/uni-cli-shared": "^2.0.2-3080720230703001",
"@dcloudio/uni-helper-json": "*",
"@dcloudio/uni-migration": "^2.0.2-3080720230703001",
"@dcloudio/uni-template-compiler": "^2.0.2-3080720230703001",
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3080720230703001",
"@dcloudio/vue-cli-plugin-uni": "^2.0.2-3080720230703001",
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3080720230703001",
"@dcloudio/webpack-uni-mp-loader": "^2.0.2-3080720230703001",
"@dcloudio/webpack-uni-pages-loader": "^2.0.2-3080720230703001",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.11.0",
"cross-env": "^7.0.2",
"jest": "^25.4.0",
"mini-types": "*",
"miniprogram-api-typings": "*",
"postcss-comment": "^2.0.0",
"sass": "^1.63.6",
"sass-loader": "^10.4.1",
"vue-template-compiler": ">= 2.6.14 < 2.7"
},
"browserslist": [
"Android >= 4.4",
"ios >= 9"
],
"uni-app": {
"scripts": {}
}
}
const path = require('path')
module.exports = {
const webpack = require('webpack')
const config = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
......@@ -20,3 +21,7 @@ module.exports = {
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
if (webpack.version[0] > 4) {
delete config.parser
}
module.exports = config
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/x-icon" href="https://cdn.uviewui.com/uview/common/favicon.webp">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
</html>
import Vue from 'vue'
declare module "vue/types/options" {
type Hooks = App.AppInstance & Page.PageInstance;
interface ComponentOptions<V extends Vue> extends Hooks {
/**
* 组件类型
*/
mpType?: string;
}
}
\ No newline at end of file
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
\ No newline at end of file
/unpackage/dist/*
/node_modules/*
/.idea/*
deploy.sh
<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)
},
}
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)
},
}
</script>
<style lang="scss">
@import "uview-ui/index.scss";
@import "common/demo.scss";
/*每个页面公共css */
</style>
\ No newline at end of file
@import "uview-ui/index.scss";
@import "common/demo.scss";
/*每个页面公共css */
</style>
<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>
## 说明
uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
### **欢迎加群交流反馈:1129077272**
## 特性
- 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
- 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
- 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
- 众多的常用页面和布局,让您专注逻辑,事半功倍
- 详尽的文档支持,现代化的演示效果
- 按需引入,精简打包体积
## 预览
您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
## 友情链接
<br>
#### **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">
@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": {
"^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应用到您的产品中。
......@@ -7,7 +7,7 @@ text {
/* start--演示页面使用的统一样式--start */
.u-demo {
padding: 50rpx 40rpx;
padding: 25px 20px;
}
.u-demo-wrap {
......@@ -15,8 +15,8 @@ text {
border-color: #ddd;
border-style: dashed;
background-color: rgb(250, 250, 250);
padding: 40rpx 20rpx;
border-radius: 6px;
padding: 20px 10px;
border-radius: 3px;
}
.u-demo-area {
......@@ -25,19 +25,19 @@ text {
.u-no-demo-here {
color: $u-tips-color;
font-size: 26rpx;
font-size: 13px;
}
.u-demo-result-line {
border-width: 1px;
border-color: #ddd;
border-style: dashed;
padding: 10rpx 40rpx;
margin-top: 30rpx;
padding: 5px 20px;
margin-top: 30px;
border-radius: 5px;
background-color: rgb(240, 240, 240);
color: $u-content-color;
font-size: 32rpx;
font-size: 16px;
/* #ifndef APP-NVUE */
word-break: break-word;
display: inline-block;
......@@ -49,26 +49,26 @@ text {
.u-demo-title,
.u-config-title {
text-align: center;
font-size: 32rpx;
font-size: 16px;
font-weight: bold;
margin-bottom: 40rpx;
margin-bottom: 20px;
}
.u-config-item {
margin-top: 50rpx;
margin-top: 25px;
}
.u-config-title {
margin-top: 40rpx;
padding-bottom: 10rpx;
margin-top: 20px;
padding-bottom: 5px;
}
.u-item-title {
position: relative;
font-size: 28rpx;
font-size: 15px;
padding-left: 8px;
line-height: 1;
margin-bottom: 22rpx;
margin-bottom: 11px;
}
.u-item-title:after {
......
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',
},
}
\ No newline at end of file
export default {
// 可以以页面为单位来写,比如首页的内容,写在index字段,个人中心写在center,共同部分写在common部分
components: {
desc: '众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让你快速集成,开箱即用'
},
js: {
desc: '众多的贴心小工具,是你开发过程中召之即来的利器,让你飞镖在手,百步穿杨'
},
template: {
desc: '收集众多的常用页面和布局,减少开发者的重复工作,让你专注逻辑,事半功倍'
},
nav: {
components: '组件',
js: '工具',
template: '模板'
},
common: {
intro: '多平台快速开发的UI框架',
title: 'uView UI',
},
}
\ No newline at end of file
/*!
* vue-i18n v8.20.0
* (c) 2020 kazuya kawaguchi
* Released under the MIT License.
*/
var t,e;t=this,e=function(){"use strict";var t=["style","currency","currencyDisplay","useGrouping","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","minimumSignificantDigits","maximumSignificantDigits","localeMatcher","formatMatcher","unit"];function e(t,e){"undefined"!=typeof console&&(console.warn("[vue-i18n] "+t),e&&console.warn(e.stack))}var n=Array.isArray;function r(t){return null!==t&&"object"==typeof t}function a(t){return"string"==typeof t}var i=Object.prototype.toString,o="[object Object]";function s(t){return i.call(t)===o}function l(t){return null==t}function c(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];var n=null,a=null;return 1===t.length?r(t[0])||Array.isArray(t[0])?a=t[0]:"string"==typeof t[0]&&(n=t[0]):2===t.length&&("string"==typeof t[0]&&(n=t[0]),(r(t[1])||Array.isArray(t[1]))&&(a=t[1])),{locale:n,params:a}}function u(t){return JSON.parse(JSON.stringify(t))}function h(t,e){return!!~t.indexOf(e)}var f=Object.prototype.hasOwnProperty;function p(t,e){return f.call(t,e)}function m(t){for(var e=arguments,n=Object(t),a=1;a<arguments.length;a++){var i=e[a];if(null!=i){var o=void 0;for(o in i)p(i,o)&&(r(i[o])?n[o]=m(n[o],i[o]):n[o]=i[o])}}return n}function _(t,e){if(t===e)return!0;var n=r(t),a=r(e);if(!n||!a)return!n&&!a&&String(t)===String(e);try{var i=Array.isArray(t),o=Array.isArray(e);if(i&&o)return t.length===e.length&&t.every(function(t,n){return _(t,e[n])});if(i||o)return!1;var s=Object.keys(t),l=Object.keys(e);return s.length===l.length&&s.every(function(n){return _(t[n],e[n])})}catch(t){return!1}}var g={beforeCreate:function(){var t=this.$options;if(t.i18n=t.i18n||(t.__i18n?{}:null),t.i18n){if(t.i18n instanceof et){if(t.__i18n)try{var e={};t.__i18n.forEach(function(t){e=m(e,JSON.parse(t))}),Object.keys(e).forEach(function(n){t.i18n.mergeLocaleMessage(n,e[n])})}catch(t){}this._i18n=t.i18n,this._i18nWatcher=this._i18n.watchI18nData()}else if(s(t.i18n)){var n=this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof et?this.$root.$i18n:null;if(n&&(t.i18n.root=this.$root,t.i18n.formatter=n.formatter,t.i18n.fallbackLocale=n.fallbackLocale,t.i18n.formatFallbackMessages=n.formatFallbackMessages,t.i18n.silentTranslationWarn=n.silentTranslationWarn,t.i18n.silentFallbackWarn=n.silentFallbackWarn,t.i18n.pluralizationRules=n.pluralizationRules,t.i18n.preserveDirectiveContent=n.preserveDirectiveContent),t.__i18n)try{var r={};t.__i18n.forEach(function(t){r=m(r,JSON.parse(t))}),t.i18n.messages=r}catch(t){}var a=t.i18n.sharedMessages;a&&s(a)&&(t.i18n.messages=m(t.i18n.messages,a)),this._i18n=new et(t.i18n),this._i18nWatcher=this._i18n.watchI18nData(),(void 0===t.i18n.sync||t.i18n.sync)&&(this._localeWatcher=this.$i18n.watchLocale()),n&&n.onComponentInstanceCreated(this._i18n)}}else this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof et?this._i18n=this.$root.$i18n:t.parent&&t.parent.$i18n&&t.parent.$i18n instanceof et&&(this._i18n=t.parent.$i18n)},beforeMount:function(){var t=this.$options;t.i18n=t.i18n||(t.__i18n?{}:null),t.i18n?t.i18n instanceof et?(this._i18n.subscribeDataChanging(this),this._subscribing=!0):s(t.i18n)&&(this._i18n.subscribeDataChanging(this),this._subscribing=!0):this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof et?(this._i18n.subscribeDataChanging(this),this._subscribing=!0):t.parent&&t.parent.$i18n&&t.parent.$i18n instanceof et&&(this._i18n.subscribeDataChanging(this),this._subscribing=!0)},beforeDestroy:function(){if(this._i18n){var t=this;this.$nextTick(function(){t._subscribing&&(t._i18n.unsubscribeDataChanging(t),delete t._subscribing),t._i18nWatcher&&(t._i18nWatcher(),t._i18n.destroyVM(),delete t._i18nWatcher),t._localeWatcher&&(t._localeWatcher(),delete t._localeWatcher)})}}},v={name:"i18n",functional:!0,props:{tag:{type:[String,Boolean,Object],default:"span"},path:{type:String,required:!0},locale:{type:String},places:{type:[Array,Object]}},render:function(t,e){var n=e.data,r=e.parent,a=e.props,i=e.slots,o=r.$i18n;if(o){var s=a.path,l=a.locale,c=a.places,u=i(),h=o.i(s,l,function(t){var e;for(e in t)if("default"!==e)return!1;return Boolean(e)}(u)||c?function(t,e){var n=e?function(t){return Array.isArray(t)?t.reduce(d,{}):Object.assign({},t)}(e):{};if(!t)return n;var r=(t=t.filter(function(t){return t.tag||""!==t.text.trim()})).every(y);return t.reduce(r?b:d,n)}(u.default,c):u),f=a.tag&&!0!==a.tag||!1===a.tag?a.tag:"span";return f?t(f,n,h):h}}};function b(t,e){return e.data&&e.data.attrs&&e.data.attrs.place&&(t[e.data.attrs.place]=e),t}function d(t,e,n){return t[n]=e,t}function y(t){return Boolean(t.data&&t.data.attrs&&t.data.attrs.place)}var F,k={name:"i18n-n",functional:!0,props:{tag:{type:[String,Boolean,Object],default:"span"},value:{type:Number,required:!0},format:{type:[String,Object]},locale:{type:String}},render:function(e,n){var i=n.props,o=n.parent,s=n.data,l=o.$i18n;if(!l)return null;var c=null,u=null;a(i.format)?c=i.format:r(i.format)&&(i.format.key&&(c=i.format.key),u=Object.keys(i.format).reduce(function(e,n){var r;return h(t,n)?Object.assign({},e,((r={})[n]=i.format[n],r)):e},null));var f=i.locale||l.locale,p=l._ntp(i.value,f,c,u),m=p.map(function(t,e){var n,r=s.scopedSlots&&s.scopedSlots[t.type];return r?r(((n={})[t.type]=t.value,n.index=e,n.parts=p,n)):t.value}),_=i.tag&&!0!==i.tag||!1===i.tag?i.tag:"span";return _?e(_,{attrs:s.attrs,class:s.class,staticClass:s.staticClass},m):m}};function w(t,e,n){C(t,n)&&T(t,e,n)}function $(t,e,n,r){if(C(t,n)){var a=n.context.$i18n;(function(t,e){var n=e.context;return t._locale===n.$i18n.locale})(t,n)&&_(e.value,e.oldValue)&&_(t._localeMessage,a.getLocaleMessage(a.locale))||T(t,e,n)}}function M(t,n,r,a){if(r.context){var i=r.context.$i18n||{};n.modifiers.preserve||i.preserveDirectiveContent||(t.textContent=""),t._vt=void 0,delete t._vt,t._locale=void 0,delete t._locale,t._localeMessage=void 0,delete t._localeMessage}else e("Vue instance does not exists in VNode context")}function C(t,n){var r=n.context;return r?!!r.$i18n||(e("VueI18n instance does not exists in Vue instance"),!1):(e("Vue instance does not exists in VNode context"),!1)}function T(t,n,r){var i,o,l=function(t){var e,n,r,i;a(t)?e=t:s(t)&&(e=t.path,n=t.locale,r=t.args,i=t.choice);return{path:e,locale:n,args:r,choice:i}}(n.value),c=l.path,u=l.locale,h=l.args,f=l.choice;if(c||u||h)if(c){var p=r.context;t._vt=t.textContent=null!=f?(i=p.$i18n).tc.apply(i,[c,f].concat(L(u,h))):(o=p.$i18n).t.apply(o,[c].concat(L(u,h))),t._locale=p.$i18n.locale,t._localeMessage=p.$i18n.getLocaleMessage(p.$i18n.locale)}else e("`path` is required in v-t directive");else e("value type not supported")}function L(t,e){var n=[];return t&&n.push(t),e&&(Array.isArray(e)||s(e))&&n.push(e),n}function I(t){I.installed=!0;(F=t).version&&Number(F.version.split(".")[0]);!function(t){t.prototype.hasOwnProperty("$i18n")||Object.defineProperty(t.prototype,"$i18n",{get:function(){return this._i18n}}),t.prototype.$t=function(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];var r=this.$i18n;return r._t.apply(r,[t,r.locale,r._getMessages(),this].concat(e))},t.prototype.$tc=function(t,e){for(var n=[],r=arguments.length-2;r-- >0;)n[r]=arguments[r+2];var a=this.$i18n;return a._tc.apply(a,[t,a.locale,a._getMessages(),this,e].concat(n))},t.prototype.$te=function(t,e){var n=this.$i18n;return n._te(t,n.locale,n._getMessages(),e)},t.prototype.$d=function(t){for(var e,n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return(e=this.$i18n).d.apply(e,[t].concat(n))},t.prototype.$n=function(t){for(var e,n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return(e=this.$i18n).n.apply(e,[t].concat(n))}}(F),F.mixin(g),F.directive("t",{bind:w,update:$,unbind:M}),F.component(v.name,v),F.component(k.name,k),F.config.optionMergeStrategies.i18n=function(t,e){return void 0===e?t:e}}var D=function(){this._caches=Object.create(null)};D.prototype.interpolate=function(t,e){if(!e)return[t];var n=this._caches[t];return n||(n=function(t){var e=[],n=0,r="";for(;n<t.length;){var a=t[n++];if("{"===a){r&&e.push({type:"text",value:r}),r="";var i="";for(a=t[n++];void 0!==a&&"}"!==a;)i+=a,a=t[n++];var o="}"===a,s=O.test(i)?"list":o&&x.test(i)?"named":"unknown";e.push({value:i,type:s})}else"%"===a?"{"!==t[n]&&(r+=a):r+=a}return r&&e.push({type:"text",value:r}),e}(t),this._caches[t]=n),function(t,e){var n=[],a=0,i=Array.isArray(e)?"list":r(e)?"named":"unknown";if("unknown"===i)return n;for(;a<t.length;){var o=t[a];switch(o.type){case"text":n.push(o.value);break;case"list":n.push(e[parseInt(o.value,10)]);break;case"named":"named"===i&&n.push(e[o.value])}a++}return n}(n,e)};var O=/^(?:\d)+/,x=/^(?:\w)+/,W=0,j=1,N=2,A=3,S=0,R=4,H=5,P=6,V=7,E=8,z=[];z[S]={ws:[S],ident:[3,W],"[":[R],eof:[V]},z[1]={ws:[1],".":[2],"[":[R],eof:[V]},z[2]={ws:[2],ident:[3,W],0:[3,W],number:[3,W]},z[3]={ident:[3,W],0:[3,W],number:[3,W],ws:[1,j],".":[2,j],"[":[R,j],eof:[V,j]},z[R]={"'":[H,W],'"':[P,W],"[":[R,N],"]":[1,A],eof:E,else:[R,W]},z[H]={"'":[R,W],eof:E,else:[H,W]},z[P]={'"':[R,W],eof:E,else:[P,W]};var B=/^\s?(?:true|false|-?[\d.]+|'[^']*'|"[^"]*")\s?$/;function U(t){if(null==t)return"eof";switch(t.charCodeAt(0)){case 91:case 93:case 46:case 34:case 39:return t;case 95:case 36:case 45:return"ident";case 9:case 10:case 13:case 160:case 65279:case 8232:case 8233:return"ws"}return"ident"}function J(t){var e,n,r,a=t.trim();return("0"!==t.charAt(0)||!isNaN(t))&&(r=a,B.test(r)?(n=(e=a).charCodeAt(0))!==e.charCodeAt(e.length-1)||34!==n&&39!==n?e:e.slice(1,-1):"*"+a)}var q=function(){this._cache=Object.create(null)};q.prototype.parsePath=function(t){var e=this._cache[t];return e||(e=function(t){var e,n,r,a,i,o,s,l=[],c=-1,u=S,h=0,f=[];function p(){var e=t[c+1];if(u===H&&"'"===e||u===P&&'"'===e)return c++,r="\\"+e,f[W](),!0}for(f[j]=function(){void 0!==n&&(l.push(n),n=void 0)},f[W]=function(){void 0===n?n=r:n+=r},f[N]=function(){f[W](),h++},f[A]=function(){if(h>0)h--,u=R,f[W]();else{if(h=0,void 0===n)return!1;if(!1===(n=J(n)))return!1;f[j]()}};null!==u;)if("\\"!==(e=t[++c])||!p()){if(a=U(e),(i=(s=z[u])[a]||s.else||E)===E)return;if(u=i[0],(o=f[i[1]])&&(r=void 0===(r=i[2])?e:r,!1===o()))return;if(u===V)return l}}(t))&&(this._cache[t]=e),e||[]},q.prototype.getPathValue=function(t,e){if(!r(t))return null;var n=this.parsePath(e);if(0===n.length)return null;for(var a=n.length,i=t,o=0;o<a;){var s=i[n[o]];if(void 0===s)return null;i=s,o++}return i};var G,X=/<\/?[\w\s="/.':;#-\/]+>/,Z=/(?:@(?:\.[a-z]+)?:(?:[\w\-_|.]+|\([\w\-_|.]+\)))/g,K=/^@(?:\.([a-z]+))?:/,Q=/[()]/g,Y={upper:function(t){return t.toLocaleUpperCase()},lower:function(t){return t.toLocaleLowerCase()},capitalize:function(t){return""+t.charAt(0).toLocaleUpperCase()+t.substr(1)}},tt=new D,et=function(t){var e=this;void 0===t&&(t={}),!F&&"undefined"!=typeof window&&window.Vue&&I(window.Vue);var n=t.locale||"en-US",r=!1!==t.fallbackLocale&&(t.fallbackLocale||"en-US"),a=t.messages||{},i=t.dateTimeFormats||{},o=t.numberFormats||{};this._vm=null,this._formatter=t.formatter||tt,this._modifiers=t.modifiers||{},this._missing=t.missing||null,this._root=t.root||null,this._sync=void 0===t.sync||!!t.sync,this._fallbackRoot=void 0===t.fallbackRoot||!!t.fallbackRoot,this._formatFallbackMessages=void 0!==t.formatFallbackMessages&&!!t.formatFallbackMessages,this._silentTranslationWarn=void 0!==t.silentTranslationWarn&&t.silentTranslationWarn,this._silentFallbackWarn=void 0!==t.silentFallbackWarn&&!!t.silentFallbackWarn,this._dateTimeFormatters={},this._numberFormatters={},this._path=new q,this._dataListeners=[],this._componentInstanceCreatedListener=t.componentInstanceCreatedListener||null,this._preserveDirectiveContent=void 0!==t.preserveDirectiveContent&&!!t.preserveDirectiveContent,this.pluralizationRules=t.pluralizationRules||{},this._warnHtmlInMessage=t.warnHtmlInMessage||"off",this._postTranslation=t.postTranslation||null,this.getChoiceIndex=function(t,n){var r=Object.getPrototypeOf(e);if(r&&r.getChoiceIndex)return r.getChoiceIndex.call(e,t,n);var a,i;return e.locale in e.pluralizationRules?e.pluralizationRules[e.locale].apply(e,[t,n]):(a=t,i=n,a=Math.abs(a),2===i?a?a>1?1:0:1:a?Math.min(a,2):0)},this._exist=function(t,n){return!(!t||!n)&&(!l(e._path.getPathValue(t,n))||!!t[n])},"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||Object.keys(a).forEach(function(t){e._checkLocaleMessage(t,e._warnHtmlInMessage,a[t])}),this._initVM({locale:n,fallbackLocale:r,messages:a,dateTimeFormats:i,numberFormats:o})},nt={vm:{configurable:!0},messages:{configurable:!0},dateTimeFormats:{configurable:!0},numberFormats:{configurable:!0},availableLocales:{configurable:!0},locale:{configurable:!0},fallbackLocale:{configurable:!0},formatFallbackMessages:{configurable:!0},missing:{configurable:!0},formatter:{configurable:!0},silentTranslationWarn:{configurable:!0},silentFallbackWarn:{configurable:!0},preserveDirectiveContent:{configurable:!0},warnHtmlInMessage:{configurable:!0},postTranslation:{configurable:!0}};return et.prototype._checkLocaleMessage=function(t,n,r){var i=function(t,n,r,o){if(s(r))Object.keys(r).forEach(function(e){var a=r[e];s(a)?(o.push(e),o.push("."),i(t,n,a,o),o.pop(),o.pop()):(o.push(e),i(t,n,a,o),o.pop())});else if(Array.isArray(r))r.forEach(function(e,r){s(e)?(o.push("["+r+"]"),o.push("."),i(t,n,e,o),o.pop(),o.pop()):(o.push("["+r+"]"),i(t,n,e,o),o.pop())});else if(a(r)){if(X.test(r)){var l="Detected HTML in message '"+r+"' of keypath '"+o.join("")+"' at '"+n+"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp";"warn"===t?e(l):"error"===t&&function(t,e){"undefined"!=typeof console&&(console.error("[vue-i18n] "+t),e&&console.error(e.stack))}(l)}}};i(n,t,r,[])},et.prototype._initVM=function(t){var e=F.config.silent;F.config.silent=!0,this._vm=new F({data:t}),F.config.silent=e},et.prototype.destroyVM=function(){this._vm.$destroy()},et.prototype.subscribeDataChanging=function(t){this._dataListeners.push(t)},et.prototype.unsubscribeDataChanging=function(t){!function(t,e){if(t.length){var n=t.indexOf(e);if(n>-1)t.splice(n,1)}}(this._dataListeners,t)},et.prototype.watchI18nData=function(){var t=this;return this._vm.$watch("$data",function(){for(var e=t._dataListeners.length;e--;)F.nextTick(function(){t._dataListeners[e]&&t._dataListeners[e].$forceUpdate()})},{deep:!0})},et.prototype.watchLocale=function(){if(!this._sync||!this._root)return null;var t=this._vm;return this._root.$i18n.vm.$watch("locale",function(e){t.$set(t,"locale",e),t.$forceUpdate()},{immediate:!0})},et.prototype.onComponentInstanceCreated=function(t){this._componentInstanceCreatedListener&&this._componentInstanceCreatedListener(t,this)},nt.vm.get=function(){return this._vm},nt.messages.get=function(){return u(this._getMessages())},nt.dateTimeFormats.get=function(){return u(this._getDateTimeFormats())},nt.numberFormats.get=function(){return u(this._getNumberFormats())},nt.availableLocales.get=function(){return Object.keys(this.messages).sort()},nt.locale.get=function(){return this._vm.locale},nt.locale.set=function(t){this._vm.$set(this._vm,"locale",t)},nt.fallbackLocale.get=function(){return this._vm.fallbackLocale},nt.fallbackLocale.set=function(t){this._localeChainCache={},this._vm.$set(this._vm,"fallbackLocale",t)},nt.formatFallbackMessages.get=function(){return this._formatFallbackMessages},nt.formatFallbackMessages.set=function(t){this._formatFallbackMessages=t},nt.missing.get=function(){return this._missing},nt.missing.set=function(t){this._missing=t},nt.formatter.get=function(){return this._formatter},nt.formatter.set=function(t){this._formatter=t},nt.silentTranslationWarn.get=function(){return this._silentTranslationWarn},nt.silentTranslationWarn.set=function(t){this._silentTranslationWarn=t},nt.silentFallbackWarn.get=function(){return this._silentFallbackWarn},nt.silentFallbackWarn.set=function(t){this._silentFallbackWarn=t},nt.preserveDirectiveContent.get=function(){return this._preserveDirectiveContent},nt.preserveDirectiveContent.set=function(t){this._preserveDirectiveContent=t},nt.warnHtmlInMessage.get=function(){return this._warnHtmlInMessage},nt.warnHtmlInMessage.set=function(t){var e=this,n=this._warnHtmlInMessage;if(this._warnHtmlInMessage=t,n!==t&&("warn"===t||"error"===t)){var r=this._getMessages();Object.keys(r).forEach(function(t){e._checkLocaleMessage(t,e._warnHtmlInMessage,r[t])})}},nt.postTranslation.get=function(){return this._postTranslation},nt.postTranslation.set=function(t){this._postTranslation=t},et.prototype._getMessages=function(){return this._vm.messages},et.prototype._getDateTimeFormats=function(){return this._vm.dateTimeFormats},et.prototype._getNumberFormats=function(){return this._vm.numberFormats},et.prototype._warnDefault=function(t,e,n,r,i,o){if(!l(n))return n;if(this._missing){var s=this._missing.apply(null,[t,e,r,i]);if(a(s))return s}if(this._formatFallbackMessages){var u=c.apply(void 0,i);return this._render(e,o,u.params,e)}return e},et.prototype._isFallbackRoot=function(t){return!t&&!l(this._root)&&this._fallbackRoot},et.prototype._isSilentFallbackWarn=function(t){return this._silentFallbackWarn instanceof RegExp?this._silentFallbackWarn.test(t):this._silentFallbackWarn},et.prototype._isSilentFallback=function(t,e){return this._isSilentFallbackWarn(e)&&(this._isFallbackRoot()||t!==this.fallbackLocale)},et.prototype._isSilentTranslationWarn=function(t){return this._silentTranslationWarn instanceof RegExp?this._silentTranslationWarn.test(t):this._silentTranslationWarn},et.prototype._interpolate=function(t,e,n,r,i,o,c){if(!e)return null;var u,h=this._path.getPathValue(e,n);if(Array.isArray(h)||s(h))return h;if(l(h)){if(!s(e))return null;if(!a(u=e[n]))return null}else{if(!a(h))return null;u=h}return(u.indexOf("@:")>=0||u.indexOf("@.")>=0)&&(u=this._link(t,e,u,r,"raw",o,c)),this._render(u,i,o,n)},et.prototype._link=function(t,e,n,r,a,i,o){var s=n,l=s.match(Z);for(var c in l)if(l.hasOwnProperty(c)){var u=l[c],f=u.match(K),p=f[0],m=f[1],_=u.replace(p,"").replace(Q,"");if(h(o,_))return s;o.push(_);var g=this._interpolate(t,e,_,r,"raw"===a?"string":a,"raw"===a?void 0:i,o);if(this._isFallbackRoot(g)){if(!this._root)throw Error("unexpected error");var v=this._root.$i18n;g=v._translate(v._getMessages(),v.locale,v.fallbackLocale,_,r,a,i)}g=this._warnDefault(t,_,g,r,Array.isArray(i)?i:[i],a),this._modifiers.hasOwnProperty(m)?g=this._modifiers[m](g):Y.hasOwnProperty(m)&&(g=Y[m](g)),o.pop(),s=g?s.replace(u,g):s}return s},et.prototype._render=function(t,e,n,r){var i=this._formatter.interpolate(t,n,r);return i||(i=tt.interpolate(t,n,r)),"string"!==e||a(i)?i:i.join("")},et.prototype._appendItemToChain=function(t,e,n){var r=!1;return h(t,e)||(r=!0,e&&(r="!"!==e[e.length-1],e=e.replace(/!/g,""),t.push(e),n&&n[e]&&(r=n[e]))),r},et.prototype._appendLocaleToChain=function(t,e,n){var r,a=e.split("-");do{var i=a.join("-");r=this._appendItemToChain(t,i,n),a.splice(-1,1)}while(a.length&&!0===r);return r},et.prototype._appendBlockToChain=function(t,e,n){for(var r=!0,i=0;i<e.length&&"boolean"==typeof r;i++){var o=e[i];a(o)&&(r=this._appendLocaleToChain(t,o,n))}return r},et.prototype._getLocaleChain=function(t,e){if(""===t)return[];this._localeChainCache||(this._localeChainCache={});var i=this._localeChainCache[t];if(!i){e||(e=this.fallbackLocale),i=[];for(var o,s=[t];n(s);)s=this._appendBlockToChain(i,s,e);(s=a(o=n(e)?e:r(e)?e.default?e.default:null:e)?[o]:o)&&this._appendBlockToChain(i,s,null),this._localeChainCache[t]=i}return i},et.prototype._translate=function(t,e,n,r,a,i,o){for(var s,c=this._getLocaleChain(e,n),u=0;u<c.length;u++){var h=c[u];if(!l(s=this._interpolate(h,t[h],r,a,i,o,[r])))return s}return null},et.prototype._t=function(t,e,n,r){for(var a,i=[],o=arguments.length-4;o-- >0;)i[o]=arguments[o+4];if(!t)return"";var s=c.apply(void 0,i),l=s.locale||e,u=this._translate(n,l,this.fallbackLocale,t,r,"string",s.params);if(this._isFallbackRoot(u)){if(!this._root)throw Error("unexpected error");return(a=this._root).$t.apply(a,[t].concat(i))}return u=this._warnDefault(l,t,u,r,i,"string"),this._postTranslation&&null!=u&&(u=this._postTranslation(u,t)),u},et.prototype.t=function(t){for(var e,n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return(e=this)._t.apply(e,[t,this.locale,this._getMessages(),null].concat(n))},et.prototype._i=function(t,e,n,r,a){var i=this._translate(n,e,this.fallbackLocale,t,r,"raw",a);if(this._isFallbackRoot(i)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.i(t,e,a)}return this._warnDefault(e,t,i,r,[a],"raw")},et.prototype.i=function(t,e,n){return t?(a(e)||(e=this.locale),this._i(t,e,this._getMessages(),null,n)):""},et.prototype._tc=function(t,e,n,r,a){for(var i,o=[],s=arguments.length-5;s-- >0;)o[s]=arguments[s+5];if(!t)return"";void 0===a&&(a=1);var l={count:a,n:a},u=c.apply(void 0,o);return u.params=Object.assign(l,u.params),o=null===u.locale?[u.params]:[u.locale,u.params],this.fetchChoice((i=this)._t.apply(i,[t,e,n,r].concat(o)),a)},et.prototype.fetchChoice=function(t,e){if(!t&&!a(t))return null;var n=t.split("|");return n[e=this.getChoiceIndex(e,n.length)]?n[e].trim():t},et.prototype.tc=function(t,e){for(var n,r=[],a=arguments.length-2;a-- >0;)r[a]=arguments[a+2];return(n=this)._tc.apply(n,[t,this.locale,this._getMessages(),null,e].concat(r))},et.prototype._te=function(t,e,n){for(var r=[],a=arguments.length-3;a-- >0;)r[a]=arguments[a+3];var i=c.apply(void 0,r).locale||e;return this._exist(n[i],t)},et.prototype.te=function(t,e){return this._te(t,this.locale,this._getMessages(),e)},et.prototype.getLocaleMessage=function(t){return u(this._vm.messages[t]||{})},et.prototype.setLocaleMessage=function(t,e){"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||this._checkLocaleMessage(t,this._warnHtmlInMessage,e),this._vm.$set(this._vm.messages,t,e)},et.prototype.mergeLocaleMessage=function(t,e){"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||this._checkLocaleMessage(t,this._warnHtmlInMessage,e),this._vm.$set(this._vm.messages,t,m({},this._vm.messages[t]||{},e))},et.prototype.getDateTimeFormat=function(t){return u(this._vm.dateTimeFormats[t]||{})},et.prototype.setDateTimeFormat=function(t,e){this._vm.$set(this._vm.dateTimeFormats,t,e),this._clearDateTimeFormat(t,e)},et.prototype.mergeDateTimeFormat=function(t,e){this._vm.$set(this._vm.dateTimeFormats,t,m(this._vm.dateTimeFormats[t]||{},e)),this._clearDateTimeFormat(t,e)},et.prototype._clearDateTimeFormat=function(t,e){for(var n in e){var r=t+"__"+n;this._dateTimeFormatters.hasOwnProperty(r)&&delete this._dateTimeFormatters[r]}},et.prototype._localizeDateTime=function(t,e,n,r,a){for(var i=e,o=r[i],s=this._getLocaleChain(e,n),c=0;c<s.length;c++){var u=s[c];if(i=u,!l(o=r[u])&&!l(o[a]))break}if(l(o)||l(o[a]))return null;var h=o[a],f=i+"__"+a,p=this._dateTimeFormatters[f];return p||(p=this._dateTimeFormatters[f]=new Intl.DateTimeFormat(i,h)),p.format(t)},et.prototype._d=function(t,e,n){if(!n)return new Intl.DateTimeFormat(e).format(t);var r=this._localizeDateTime(t,e,this.fallbackLocale,this._getDateTimeFormats(),n);if(this._isFallbackRoot(r)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.d(t,n,e)}return r||""},et.prototype.d=function(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];var i=this.locale,o=null;return 1===e.length?a(e[0])?o=e[0]:r(e[0])&&(e[0].locale&&(i=e[0].locale),e[0].key&&(o=e[0].key)):2===e.length&&(a(e[0])&&(o=e[0]),a(e[1])&&(i=e[1])),this._d(t,i,o)},et.prototype.getNumberFormat=function(t){return u(this._vm.numberFormats[t]||{})},et.prototype.setNumberFormat=function(t,e){this._vm.$set(this._vm.numberFormats,t,e),this._clearNumberFormat(t,e)},et.prototype.mergeNumberFormat=function(t,e){this._vm.$set(this._vm.numberFormats,t,m(this._vm.numberFormats[t]||{},e)),this._clearNumberFormat(t,e)},et.prototype._clearNumberFormat=function(t,e){for(var n in e){var r=t+"__"+n;this._numberFormatters.hasOwnProperty(r)&&delete this._numberFormatters[r]}},et.prototype._getNumberFormatter=function(t,e,n,r,a,i){for(var o=e,s=r[o],c=this._getLocaleChain(e,n),u=0;u<c.length;u++){var h=c[u];if(o=h,!l(s=r[h])&&!l(s[a]))break}if(l(s)||l(s[a]))return null;var f,p=s[a];if(i)f=new Intl.NumberFormat(o,Object.assign({},p,i));else{var m=o+"__"+a;(f=this._numberFormatters[m])||(f=this._numberFormatters[m]=new Intl.NumberFormat(o,p))}return f},et.prototype._n=function(t,e,n,r){if(!et.availabilities.numberFormat)return"";if(!n)return(r?new Intl.NumberFormat(e,r):new Intl.NumberFormat(e)).format(t);var a=this._getNumberFormatter(t,e,this.fallbackLocale,this._getNumberFormats(),n,r),i=a&&a.format(t);if(this._isFallbackRoot(i)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.n(t,Object.assign({},{key:n,locale:e},r))}return i||""},et.prototype.n=function(e){for(var n=[],i=arguments.length-1;i-- >0;)n[i]=arguments[i+1];var o=this.locale,s=null,l=null;return 1===n.length?a(n[0])?s=n[0]:r(n[0])&&(n[0].locale&&(o=n[0].locale),n[0].key&&(s=n[0].key),l=Object.keys(n[0]).reduce(function(e,r){var a;return h(t,r)?Object.assign({},e,((a={})[r]=n[0][r],a)):e},null)):2===n.length&&(a(n[0])&&(s=n[0]),a(n[1])&&(o=n[1])),this._n(e,o,s,l)},et.prototype._ntp=function(t,e,n,r){if(!et.availabilities.numberFormat)return[];if(!n)return(r?new Intl.NumberFormat(e,r):new Intl.NumberFormat(e)).formatToParts(t);var a=this._getNumberFormatter(t,e,this.fallbackLocale,this._getNumberFormats(),n,r),i=a&&a.formatToParts(t);if(this._isFallbackRoot(i)){if(!this._root)throw Error("unexpected error");return this._root.$i18n._ntp(t,e,n,r)}return i||[]},Object.defineProperties(et.prototype,nt),Object.defineProperty(et,"availabilities",{get:function(){if(!G){var t="undefined"!=typeof Intl;G={dateTimeFormat:t&&void 0!==Intl.DateTimeFormat,numberFormat:t&&void 0!==Intl.NumberFormat}}return G}}),et.install=I,et.version="8.20.0",et},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueI18n=e();
\ No newline at end of file
......@@ -4,61 +4,100 @@
<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image>
<view class="nav-info">
<view class="nav-title__text">
uView UI
<text class="nav-info__title__text">uView {{version}}</text>
</view>
<view class="nav-slogan">
多平台快速开发的UI框架
{{$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
export default {
props: {
desc: String,
title: String,
},
computed: {
lang() {
return this.$i18n.locale == 'zh' ? 'zh' : 'en';
}
},
data() {
return {
version: uni.$u.config.v
}
},
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: 30rpx;
}
.nav-title {
display: flex;
align-items: center;
}
.nav-info {
margin-left: 30rpx;
}
.nav-title__text {
display: flex;
color: $u-main-color;
font-size: 50rpx;
font-weight: bold;
}
.logo {
width: 140rpx;
height: auto;
}
.nav-slogan {
color: $u-tips-color;
font-size: 28rpx;
}
.nav-desc {
margin-top: 20rpx;
font-size: 28rpx;
color: $u-content-color;
}
.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>
/*
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 15:18:39
*/
import Vue from 'vue'
import App from './App'
import './uni.promisify.adaptor'
// 引入全局uView
import uView from 'uview-ui';
// 此处为演示vuex使用,非uView的功能部分
import store from '@/store';
// i18n部分的配置
// 引入语言包,注意路径
import Chinese from '@/common/locales/zh.js';
import English from '@/common/locales/en.js';
// VueI18n
import VueI18n from '@/common/vue-i18n.min.js';
Vue.config.productionTip = false
App.mpType = 'app'
// 此处为演示Vue.prototype使用,非uView的功能部分
Vue.prototype.vuePrototype = '枣红'
Vue.prototype.vuePrototype = '枣红';
// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView)
// 此处为演示vuex使用,非uView的功能部分
import store from '@/store'
Vue.use(uView);
// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore)
let vuexStore = require('@/store/$u.mixin.js');
Vue.mixin(vuexStore);
// 引入uView对小程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)
Vue.mixin(mpShare);
// 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({
store,
...App
i18n,
store,
...App
})
// http拦截器,将此部分放在new Vue()和app.$mount()之间,才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)
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)
import httpApi from '@/common/http.api.js';
Vue.use(httpApi, app);
app.$mount()
{
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.5.8",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
// APP-VUE分包,可提APP升启动速度,2.7.12开始支持,兼容微信小程序分包方案,默认关闭
"optimization" : {
"subPackages" : true
},
"safearea" : {
"bottom" : {
"offset" : "none"
}
},
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"compilerVersion" : 3,
"modules" : {},
"distribute" : {
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
},
"ios" : {},
"sdkConfigs" : {
"ad" : {}
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
}
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wxc256e348c4032ebd",
"setting" : {
"urlCheck" : true,
"es6" : false,
"minified" : true,
"postcss" : true
},
"optimization" : {
"subPackages" : true
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true,
"component2" : true
},
"mp-baidu" : {
"usingComponents" : true,
"appid" : "17597421"
},
"mp-toutiao" : {
"usingComponents" : true
},
"h5" : {
"template" : "template.h5.html",
"router" : {
"mode" : "hash",
"base" : ""
},
"optimization" : {
"treeShaking" : {
"enable" : true
}
},
"title" : "uView UI"
}
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.8.8",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
// APP-VUE分包,可提APP升启动速度,2.7.12开始支持,兼容微信小程序分包方案,默认关闭
"optimization" : {
"subPackages" : true
},
"safearea" : {
"bottom" : {
"offset" : "none"
}
},
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"compilerVersion" : 3,
"modules" : {},
"distribute" : {
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
},
"ios" : {},
"sdkConfigs" : {
"ad" : {}
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
}
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wxc256e348c4032ebd",
"setting" : {
"urlCheck" : true,
"es6" : false,
"minified" : true,
"postcss" : true
},
"optimization" : {
"subPackages" : true
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true,
"component2" : true
},
"mp-baidu" : {
"usingComponents" : true,
"appid" : "17597421"
},
"mp-toutiao" : {
"usingComponents" : true
},
"h5" : {
"template" : "template.h5.html",
"router" : {
"mode" : "hash",
"base" : ""
},
"optimization" : {
"treeShaking" : {
"enable" : true
}
},
"title" : "uView UI"
}
}
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
......@@ -20,7 +20,7 @@
},
// avatarCropper-头像裁剪
{
"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
"path": "pages/example/u-avatar-cropper",
"style": {
"navigationBarTitleText": "头像裁剪",
"navigationBarBackgroundColor": "#000000"
......@@ -42,7 +42,7 @@
},
// fullScreen-压窗屏
{
"path": "uview-ui/components/u-full-screen/u-full-screen",
"path": "pages/example/u-full-screen",
"style": {
"navigationStyle": "custom",
"app-plus": {
......@@ -55,166 +55,166 @@
}
],
"subPackages": [{
"root": "pages/componentsC",
"pages": [
// test-测试
{
"path": "test/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"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/componentsC",
"pages": [
// test-测试
{
"path": "test/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"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": [
......@@ -835,11 +835,11 @@
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/example/components"
// "iconPath": "static/uview/example/component.png",
// "selectedIconPath": "static/uview/example/component_select.png",
// "text": "组件"
},
"pagePath": "pages/example/components"
// "iconPath": "static/uview/example/component.png",
// "selectedIconPath": "static/uview/example/component_select.png",
// "text": "组件"
},
{
"pagePath": "pages/example/js"
// "iconPath": "static/uview/example/js.png",
......
......@@ -21,23 +21,23 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection>
<u-subsection :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">性别选择</view>
<u-subsection vibrateShort :list="['男', '女', '不显示']" @change="sexChange"></u-subsection>
<u-subsection :list="['男', '女', '不显示']" @change="sexChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">等级</view>
<u-subsection vibrateShort :list="['显示', '不显示']" @change="levelChange"></u-subsection>
<u-subsection :list="['显示', '不显示']" @change="levelChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义内容</view>
<u-subsection vibrateShort current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection>
<u-subsection current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">尺寸</view>
<u-subsection vibrateShort current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection>
<u-subsection current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -16,11 +16,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">生成图片质量</view>
<u-subsection vibrateShort :current="1" :list="['0.3', '0.7', '1']" @change="qualityChange"></u-subsection>
<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 vibrateShort :current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view> -->
</view>
......@@ -50,7 +50,7 @@
methods: {
chooseAvatar() {
this.$u.route({
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
url: 'pages/example/u-avatar-cropper',
params: {
// 输出图片宽度,高等于宽,单位px
destWidth: 300,
......
......@@ -17,19 +17,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['圆形', '方形']" @change="modeChange"></u-subsection>
<u-subsection :list="['圆形', '方形']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">组件位置</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="positionChange"></u-subsection>
<u-subsection :list="['默认', '自定义']" @change="positionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示组件的滚动条距离</view>
<u-subsection vibrateShort current="1" :list="['200', '400', '600']" @change="scrollTopChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -19,15 +19,15 @@
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
<u-subsection :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort current="1" :list="['单个日期', '日期范围']" @change="modeChange"></u-subsection>
<u-subsection current="1" :list="['单个日期', '日期范围']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -17,58 +17,58 @@
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-table>
<u-tr>
<u-td>
<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>
<u-td class="u-td">
<u-button :hair-line="false" size="mini" @click="modeChange('page')">页面不存在</u-button>
</u-td>
<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>
<u-td>
<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>
<u-td class="u-td">
<u-button :hair-line="false" size="mini" @click="modeChange('wifi')">没有WiFi</u-button>
</u-td>
<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>
<u-td>
<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>
<u-td class="u-td">
<u-button :hair-line="false" size="mini" @click="modeChange('favor')">没有收藏</u-button>
</u-td>
<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>
<u-td>
<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>
<u-td class="u-td">
<u-button :hair-line="false" size="mini" @click="modeChange('news')">无新闻列表</u-button>
</u-td>
<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>
<u-td>
<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>
<u-td class="u-td">
<u-button :hair-line="false" size="mini" @click="modeChange('data')">数据为空</u-button>
</u-td>
<u-td>
<u-td class="u-td">
待扩展
</u-td>
</u-tr>
......@@ -76,7 +76,7 @@
</view>
<view class="u-config-item">
<view class="u-item-title">传入slot</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -30,23 +30,23 @@
</view>
<view class="u-config-item">
<view class="u-item-title">右侧按钮</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示错误信息</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否必填</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示左图标和右箭头</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="customChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">第一个输入框为textarea类型</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -23,7 +23,7 @@
</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-model="item.checked" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
<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">
......@@ -44,7 +44,7 @@
<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"></u-upload>
<u-upload width="160" height="160"></u-upload>
</u-form-item>
</u-form>
<view class="agreement">
......@@ -64,19 +64,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">label对齐方式</view>
<u-subsection vibrateShort :list="['左边', '上方']" @change="labelPositionChange"></u-subsection>
<u-subsection :list="['左边', '上方']" @change="labelPositionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">边框</view>
<u-subsection vibrateShort :current="borderCurrent" :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
<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 vibrateShort :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection>
<u-subsection :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">错误提示方式</view>
<u-subsection vibrateShort :list="['message', 'toast', '下划线', '输入框']" @change="errorChange"></u-subsection>
<u-subsection :list="['message', 'toast', '下划线', '输入框']" @change="errorChange"></u-subsection>
</view>
</view>
</view>
......@@ -402,7 +402,7 @@ export default {
}
},
labelPositionChange(index) {
this.labelPosition = index == 0 ? 'left' : 'right';
this.labelPosition = index == 0 ? 'left' : 'top';
},
codeChange(text) {
this.codeTips = text;
......
......@@ -15,7 +15,7 @@
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['打开', '关闭']" @change="openModal"></u-subsection>
<u-subsection :current="current" :list="['打开', '关闭']" @change="openModal"></u-subsection>
</view>
</view>
</view>
......@@ -37,7 +37,7 @@
openModal(index) {
// 可以传递参数
if(index == 0) {
this.$u.route("/uview-ui/components/u-full-screen/u-full-screen?id=1");
this.$u.route("pages/example/u-full-screen?id=1");
}
}
}
......
......@@ -19,23 +19,23 @@
</view>
<view class="u-config-item">
<view class="u-item-title">键盘开关</view>
<u-subsection vibrateShort :current="show == true ? 0 : 1" :list="['开', '关']" @change="statusChange"></u-subsection>
<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 vibrateShort :list="['数字键盘', '身份证键盘', '车牌号键盘']" @change="modeChange"></u-subsection>
<u-subsection :list="['数字键盘', '身份证键盘', '车牌号键盘']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">打乱顺序</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">上方工具条</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示遮罩</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -9,7 +9,7 @@
:show-title="showTitle" :async-close="asyncClose"
@confirm="confirm" :content="content"
>
<!-- #ifndef MP-WEIXIN -->
<!-- #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>
......@@ -21,21 +21,21 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示标题</view>
<u-subsection vibrateShort current="0" :list="['是', '否']" @change="titleChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
</view>
<!-- #endif -->
<view class="u-config-item">
<view class="u-item-title">异步关闭</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="asyncChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="asyncChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -52,31 +52,31 @@
</view>
<view class="u-config-item">
<view class="u-item-title">标题长度</view>
<u-subsection vibrateShort :list="['短', '中', '长']" @change="titleChange"></u-subsection>
<u-subsection :list="['短', '中', '长']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">隐藏左侧返回区域</view>
<u-subsection current="1" vibrateShort :list="['是', '否']" @change="backChange"></u-subsection>
<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" vibrateShort :list="['是', '否']" @change="leftChange"></u-subsection>
<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" vibrateShort :list="['是', '否']" @change="rightChange"></u-subsection>
<u-subsection :current="slotRightCurrent" :list="['是', '否']" @change="rightChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">传入整体slot</view>
<u-subsection vibrateShort :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></u-subsection>
<u-subsection :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">完全自定义传入内容</view>
<u-subsection current="1" vibrateShort :list="['是', '否']" @change="customChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">背景色</view>
<u-subsection vibrateShort :list="['渐变', '#39CCCC', '#B471CC', '#001f3f']" @change="bgColorChange"></u-subsection>
<u-subsection :list="['渐变', '#39CCCC', '#B471CC', '#001f3f']" @change="bgColorChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -13,11 +13,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">自定义提示语</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="tipsChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="tipsChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="imageChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="imageChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -3,7 +3,7 @@
<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"></u-select>
<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>
......@@ -11,11 +11,11 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['打开', '收起']" @change="statusChange"></u-subsection>
<u-subsection :current="current" :list="['打开', '收起']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['单列', '多列独立', '多列联动']" @change="modeChange"></u-subsection>
<u-subsection :list="['单列', '多列独立', '多列联动']" @change="modeChange"></u-subsection>
</view>
</view>
</view>
......@@ -191,6 +191,9 @@ export default {
e.map((val, index) => {
this.result += this.result == '' ? val.label : '-' + val.label;
})
},
cancel(e) {
console.log(e);
}
}
};
......
......@@ -11,7 +11,7 @@
@end="end"
@moving="moving"
>
<!-- #ifndef MP-WEIXIN -->
<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
<view class="" v-if="useSlot">
<view class="badge-button">
{{value}}
......@@ -28,25 +28,25 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">自定义颜色</view>
<u-subsection vibrateShort :list="['primary', 'warning', 'error', 'success']" @change="typeChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
</view>
<!-- #endif -->
<view class="u-config-item">
<view class="u-item-title">自定义尺寸</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="sizeChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">步进值</view>
<u-subsection vibrateShort :list="['1', '10', '20']" @change="stepChange"></u-subsection>
<u-subsection :list="['1', '10', '20']" @change="stepChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">最大最小值</view>
<u-subsection vibrateShort :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection>
<u-subsection :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection>
</view>
</view>
</view>
......
......@@ -4,8 +4,8 @@
<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"></u-tabs>
<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">
......@@ -14,19 +14,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :current="sectionCurrent" :list="['滚动', '非滚动']" @change="modeChange"></u-subsection>
<u-subsection :current="sectionCurrent" :list="['滚动', '非滚动']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">标签个数(非滚动模式)</view>
<u-subsection vibrateShort :list="['2', '3', '4']" @change="countChange"></u-subsection>
<u-subsection :list="['2', '3', '4']" @change="countChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">活动选项字颜色</view>
<u-subsection vibrateShort mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
<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 vibrateShort mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
<u-subsection mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
</view>
</view>
</view>
......@@ -38,9 +38,11 @@
return {
list: [],
data: [{
name: '关注'
name: '关注',
count: 100
}, {
name: '推荐'
name: '推荐',
count: 7
}, {
name: '电影'
},{
......@@ -62,7 +64,8 @@
tabCountIndex: 0,
activeColor: this.$u.color['primary'],
bold: true,
control: true
control: true,
offset: [5, -5]
}
},
onLoad() {
......@@ -75,17 +78,20 @@
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;
......@@ -99,6 +105,7 @@
if(index == 0) {
this.isScroll = true;
this.list = this.data;
this.offset = [5, -5]
} else {
this.isScroll = false;
this.countChange(this.tabCountIndex);
......@@ -135,6 +142,6 @@
<style lang="scss" scoped>
.u-config-wrap {
}
</style>
......@@ -11,27 +11,27 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
<u-subsection :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示内容</view>
<u-subsection vibrateShort :list="['蒹葭苍苍', '白露为霜', '在水一方']" @change="textChange"></u-subsection>
<u-subsection :list="['蒹葭苍苍', '白露为霜', '在水一方']" @change="textChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主题选择</view>
<u-subsection vibrateShort current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
<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 vibrateShort :list="['square', 'circle', 'circleLeft', 'circleRight']" @change="shapeChange"></u-subsection>
<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 vibrateShort :list="['default', 'mini']" @change="sizeChange"></u-subsection>
<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">关闭图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="closeableChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="closeableChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -13,19 +13,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">主题</view>
<u-subsection vibrateShort :current="4" :list="['primary', 'success', 'error', 'warning', 'default']" @change="typeChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="urlChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="urlChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">位置</view>
<u-subsection vibrateShort current="1" :list="['顶部', '中部', '底部']" @change="positionChange"></u-subsection>
<u-subsection current="1" :list="['顶部', '中部', '底部']" @change="positionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -13,11 +13,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">主题选择</view>
<u-subsection vibrateShort :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
<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 vibrateShort current="1" :list="['长', '正常', '短']" @change="durationChange"></u-subsection>
<u-subsection current="1" :list="['长', '正常', '短']" @change="durationChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -17,11 +17,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">倒计时间</view>
<u-subsection vibrateShort :current="0" :list="['60s', '10s', '5s']" @change="secondsChange"></u-subsection>
<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 vibrateShort :current="1" :list="['是', '否']" @change="textChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="textChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -27,19 +27,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">左上角图标</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="thumbChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="thumbChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">内边距</view>
<u-subsection vibrateShort current="1" :list="['20', '30', '40']" @change="paddingChange"></u-subsection>
<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 vibrateShort :list="['显示', '隐藏']" @change="bottomChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="bottomChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">外边框</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -28,35 +28,35 @@
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">整体大小(单位rpx)</view>
<u-subsection vibrateShort current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
<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 vibrateShort :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">每个占一行</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">每个宽度50%</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">最大选择数量</view>
<u-subsection vibrateShort current="2" :list="['1', '2', '3']" @change="maxChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -13,19 +13,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">提示内容</view>
<u-subsection vibrateShort :list="['没有更多了', '到底了']" @change="textChange"></u-subsection>
<u-subsection :list="['没有更多了', '到底了']" @change="textChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">单边线宽</view>
<u-subsection vibrateShort current="1" :list="['50', '150', '250']" @change="halfWidthChange"></u-subsection>
<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 vibrateShort :list="['#dcdfe6', 'primary', 'error', 'warning', 'success']" @change="borderColorChange"></u-subsection>
<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 vibrateShort :list="['默认', '自定义']" @change="contentChange"></u-subsection>
<u-subsection :list="['默认', '自定义']" @change="contentChange"></u-subsection>
</view>
</view>
</view>
......
<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>
......@@ -3,7 +3,7 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area u-flex u-row-center">
<u-image border-radius="100%" :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
<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>
......@@ -13,19 +13,22 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection :current="statusCurrent" vibrateShort :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
<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 vibrateShort :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
<u-subsection :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
</view>
<!-- #endif -->
<view class="u-config-item">
<view class="u-item-title">加载失败状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="errorChange"></u-subsection>
<u-subsection :list="['默认', '自定义']" @change="errorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -3,7 +3,8 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area u-flex u-row-center">
<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
<!-- 头条小程序因为兼容性,必须要给组件写上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">
......@@ -12,19 +13,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">颜色</view>
<u-subsection vibrateShort :list="['primary', 'success', 'warning', 'error', 'info']" @change="colorChange"></u-subsection>
<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 vibrateShort :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection>
<u-subsection :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">细边</view>
<u-subsection vibrateShort :list="['是', '否']" @change="hairLineChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">方向</view>
<u-subsection vibrateShort :list="['水平', '垂直']" @change="directionChange"></u-subsection>
<u-subsection :list="['水平', '垂直']" @change="directionChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -12,19 +12,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['圆圈', '花朵']" @change="modeChange"></u-subsection>
<u-subsection :list="['圆圈', '花朵']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">颜色(只对圆圈模式有效)</view>
<u-subsection vibrateShort :list="['default', 'primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
<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 vibrateShort current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection>
<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 vibrateShort current="1" :list="['否', '是']" @change="showChange"></u-subsection>
<u-subsection current="1" :list="['否', '是']" @change="showChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -15,27 +15,27 @@
</view>
<view class="u-config-item">
<view class="u-item-title">主题</view>
<u-subsection vibrateShort :current="3" :list="['primary', 'success', 'error', 'warning', 'none']" @change="typeChange"></u-subsection>
<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 vibrateShort :current="current" :list="['水平', '垂直']" @change="modeChange"></u-subsection>
<u-subsection :current="current" :list="['水平', '垂直']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否衔接(水平模式有效)</view>
<u-subsection vibrateShort :list="['是', '否']" @change="isCircularChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="isCircularChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :list="['播放', '暂停']" @change="playStateChange"></u-subsection>
<u-subsection :list="['播放', '暂停']" @change="playStateChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">速度</view>
<u-subsection vibrateShort :current="1" :list="['慢', '正常', '快']" @change="speedChange"></u-subsection>
<u-subsection :current="1" :list="['慢', '正常', '快']" @change="speedChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">图标</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="iconChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="iconChange"></u-subsection>
</view>
</view>
</view>
......@@ -114,7 +114,12 @@
this.toast(`点击了关闭图标`);
},
click(index) {
this.toast(`点击了第${index + 1}条消息`);
if(this.mode == 'horizontal' && this.isCircular) {
this.toast('此模式无法获取Index值');
} else {
this.toast(`点击了第${index + 1}条消息`);
}
},
getMore() {
this.toast(`点击了更多图标`);
......
......@@ -23,23 +23,23 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">Picker开关</view>
<u-subsection vibrateShort :current="status" :list="['显示', '隐藏']" @change="statusChange"></u-subsection>
<u-subsection :current="status" :list="['显示', '隐藏']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['单列', '多列', '时间', '地区']" @change="modeChange"></u-subsection>
<u-subsection :list="['单列', '多列', '时间', '地区']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">默认时间</view>
<u-subsection vibrateShort :list="['2019-12-11 20:15:35', '2020-02-05 13:09:42']" @change="defaultTimeChange"></u-subsection>
<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 vibrateShort :list="['显示', '隐藏']" @change="minSecChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="minSecChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">默认地区</view>
<u-subsection vibrateShort :list="['广东-深圳-宝安', '海南-三亚-海棠']" @change="defaultRegionChange"></u-subsection>
<u-subsection :list="['广东-深圳-宝安', '海南-三亚-海棠']" @change="defaultRegionChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -4,10 +4,9 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<view class="">
<u-radio-group :size="size" :width="width" :wrap="wrap" v-model="value" @change="radioGroupChange" :activeColor="activeColor">
<u-radio @change="radioChange" v-for="(item, index) in list"
<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"
:shape="shape" :disabled="item.disabled"
>{{item.name}}</u-radio>
</u-radio-group>
</view>
......@@ -22,31 +21,31 @@
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
<u-subsection current="1" :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">整体大小(单位rpx)</view>
<u-subsection vibrateShort current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
<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 vibrateShort :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">每个宽度50%</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">默认选中第一个</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">禁用第一个</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
</view>
</view>
......@@ -121,12 +120,12 @@
},
// 选中某个单选框时,由radio时触发
radioChange(e) {
console.log(e);
//console.log(e);
},
// 选中任一radio时,由radio-group触发
radioGroupChange(e) {
this.result = e;
console.log(e);
//console.log(e);
},
widthChange(index) {
this.width = index == 0 ? '50%' : '';
......
......@@ -6,7 +6,7 @@
<u-rate v-model="value" :count="count" @change="change"
:active-color="activeColor" :inaction-color="inactiveColor"
:active-icon="activeIcon" :inactive-icon="inactiveIcon"
:disabled="disabled"></u-rate>
:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
</view>
</view>
<view class="u-config-wrap">
......@@ -15,27 +15,31 @@
</view>
<view class="u-config-item">
<view class="u-item-title">初始值</view>
<u-subsection vibrateShort :list="[1, 2, 3, 4]" @change="currentChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="iconChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">星星数量</view>
<u-subsection vibrateShort current="1" :list="[4, 5, 6]" @change="countChange"></u-subsection>
<u-subsection current="1" :list="[4, 5, 6]" @change="countChange"></u-subsection>
</view>
</view>
</view>
......@@ -53,7 +57,9 @@
count: 5,
customIcon: false,
plain: false,
value: 0
value: 0,
colors: [],
icons: []
}
},
watch: {
......@@ -73,7 +79,7 @@
},
methods: {
currentChange(index) {
this.current = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
this.value = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
},
plainChange(index) {
this.plain = !index;
......@@ -93,6 +99,15 @@
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;
},
......
......@@ -20,17 +20,17 @@
</view>
<view class="u-config-item">
<view class="u-item-title">超出高度隐藏</view>
<u-subsection vibrateShort current="1" :list="['100', '200', '400']" @change="showHeightChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="toggleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="toggleChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
<script>
export default {
data() {
return {
......@@ -60,8 +60,8 @@
</script>
<style lang="scss" scoped>
// 通过/deep/样式穿透去控制组件的内容
.wrap /deep/ .u-content {
// 通过样式穿透去控制组件的内容
.wrap ::v-deep .u-content {
color: #666!important;
}
</style>
\ No newline at end of file
</style>
......@@ -14,23 +14,23 @@
</view>
<view class="u-config-item">
<view class="u-item-title">初始值</view>
<u-subsection vibrateShort :list="['空', '天山雪莲']" @change="valueChange"></u-subsection>
<u-subsection :list="['空', '天山雪莲']" @change="valueChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">搜索框形状</view>
<u-subsection vibrateShort :list="['圆形', '方形']" @change="shapeChange"></u-subsection>
<u-subsection :list="['圆形', '方形']" @change="shapeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">清除控件</view>
<u-subsection vibrateShort :list="['启用', '关闭']" @change="clearabledChange"></u-subsection>
<u-subsection :list="['启用', '关闭']" @change="clearabledChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">右侧控件</view>
<u-subsection vibrateShort :list="['启用', '关闭']" @change="showActionChange"></u-subsection>
<u-subsection :list="['启用', '关闭']" @change="showActionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">水平对齐方式</view>
<u-subsection vibrateShort :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection>
<u-subsection :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -31,15 +31,15 @@
</view>
<view class="u-config-item">
<view class="u-item-title">加载状态</view>
<u-subsection vibrateShort :current="current" :list="['请求中', '请求结束']" @change="loadingChange"></u-subsection>
<u-subsection :current="current" :list="['请求中', '请求结束']" @change="loadingChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">骨架动画</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="animationChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="animationChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -12,19 +12,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['number', 'dot']" @change="modeChange"></u-subsection>
<u-subsection :list="['number', 'dot']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">方向</view>
<u-subsection vibrateShort :list="['横向', '竖向']" @change="directionChange"></u-subsection>
<u-subsection :list="['横向', '竖向']" @change="directionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort :list="['否', '是']" @change="iconChange"></u-subsection>
<u-subsection :list="['否', '是']" @change="iconChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">当前步值</view>
<u-subsection vibrateShort :list="['1', '2', '3', '4']" @change="stepChange"></u-subsection>
<u-subsection :list="['1', '2', '3', '4']" @change="stepChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -17,11 +17,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">吸顶高度</view>
<u-subsection vibrateShort :list="[0, 120, 200]" @change="offsetTopChange"></u-subsection>
<u-subsection :list="[0, 120, 200]" @change="offsetTopChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :list="['允许吸顶', '禁止吸顶']" @change="enableChange"></u-subsection>
<u-subsection :list="['允许吸顶', '禁止吸顶']" @change="enableChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -32,11 +32,11 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态(操作第一个)</view>
<u-subsection vibrateShort :current="1" :list="['打开', '关闭']" @change="showChange"></u-subsection>
<u-subsection :current="1" :list="['打开', '关闭']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">禁止滑动</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -14,19 +14,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">指示器模式</view>
<u-subsection vibrateShort :list="['round', 'rect', 'number', 'none']" @change="modeChange"></u-subsection>
<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 vibrateShort current="1" :list="['显示', '隐藏']" @change="titleChange"></u-subsection>
<u-subsection current="1" :list="['显示', '隐藏']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">指示器位置</view>
<u-subsection vibrateShort current="3" :list="['上左', '上右', '下左', '下中', '下右']" @change="indicatorPosChange"></u-subsection>
<u-subsection current="3" :list="['上左', '上右', '下左', '下中', '下右']" @change="indicatorPosChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">3D效果</view>
<u-subsection vibrateShort current="1" :list="['开启', '关闭']" @change="effect3dChange"></u-subsection>
<u-subsection current="1" :list="['开启', '关闭']" @change="effect3dChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -18,27 +18,27 @@
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :list="['关闭', '打开']" @change="modelChange"></u-subsection>
<u-subsection :list="['关闭', '打开']" @change="modelChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">颜色</view>
<u-subsection vibrateShort :list="['primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
<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 vibrateShort current="1" :list="['40', '60', '80']" @change="sizeChange"></u-subsection>
<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 vibrateShort :list="['否', '是']" @change="loadingChange"></u-subsection>
<u-subsection :list="['否', '是']" @change="loadingChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">禁用</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">异步控制</view>
<u-subsection vibrateShort :list="['关闭', '打开']" @change="asyncChange"></u-subsection>
<u-subsection :list="['关闭', '打开']" @change="asyncChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -7,28 +7,27 @@
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="showChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">凸起按钮</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="minButtonChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="minButtonChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">背景色</view>
<u-subsection vibrateShort :list="['#ffffff', '#1f1f1d']" @change="bgColorChange"></u-subsection>
<u-subsection :list="['#ffffff', '#1f1f1d']" @change="bgColorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">顶部边框</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="borderTopChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="borderTopChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">提示角标</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="badgeChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="badgeChange"></u-subsection>
</view>
</view>
</view>
<u-tabbar
:beforeSwitch="beforeSwitch"
v-model="current"
:show="show"
:bg-color="bgColor"
......
......@@ -5,29 +5,29 @@
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-table :align="align" :borderColor="borderColor">
<u-tr>
<u-th>姓名</u-th>
<u-th>年龄</u-th>
<u-th>籍贯</u-th>
<u-th>性别</u-th>
<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>
<u-td>吕布</u-td>
<u-td>22</u-td>
<u-td>楚河</u-td>
<u-td></u-td>
<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>
<u-td>项羽</u-td>
<u-td>28</u-td>
<u-td>汉界</u-td>
<u-td></u-td>
<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>
<u-td>木兰</u-td>
<u-td>24</u-td>
<u-td>南国</u-td>
<u-td></u-td>
<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>
......@@ -38,11 +38,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">边框颜色</view>
<u-subsection vibrateShort :list="['gray', 'primary', 'warning']" @change="borderColorChange"></u-subsection>
<u-subsection :list="['gray', 'primary', 'warning']" @change="borderColorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">对齐方式</view>
<u-subsection vibrateShort current="1" :list="['左', '中', '右']" @change="alignChange"></u-subsection>
<u-subsection current="1" :list="['左', '中', '右']" @change="alignChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -14,7 +14,7 @@
:percent="item.progress"></u-line-progress>
</view>
</view>
<u-upload ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
<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>
......@@ -31,19 +31,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">上传方式</view>
<u-subsection vibrateShort current="1" :list="['自动上传', '手动上传']" @change="autoUploadChange"></u-subsection>
<u-subsection current="1" :list="['自动上传', '手动上传']" @change="autoUploadChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义控件(进度条和删除按钮)</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="controlChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="controlChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">最大上传数量</view>
<u-subsection vibrateShort current="1" :list="['1', '2', '4']" @change="maxCountChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="customStyleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="customStyleChange"></u-subsection>
</view>
</view>
</view>
......@@ -53,7 +53,7 @@
export default {
data() {
return {
action: 'http://www.tp5.com',
action: 'http://127.0.0.1:7001/upload',
// 预置上传列表
fileList: [],
// fileList: [{
......@@ -72,7 +72,7 @@
}
},
onLoad() {
},
methods: {
reUpload() {
......@@ -100,7 +100,7 @@
if (index == 0) {
this.showUploadList = false;
this.customBtn = true;
} else {
this.showUploadList = true;
this.customBtn = false;
......@@ -140,6 +140,12 @@
// console.log('onListChange', lists);
this.lists = lists;
},
beforeRemove(index, lists) {
return true;
},
onChooseFail(e) {
// console.log(e);
}
}
}
</script>
......@@ -151,14 +157,14 @@
margin-left: -14rpx;
margin-right: -14rpx;
}
.u-add-wrap {
flex-direction: column;
color: $u-content-color;
font-size: 28rpx;
}
/deep/ .slot-btn {
::v-deep .slot-btn {
width: 329rpx;
height: 140rpx;
display: flex;
......
......@@ -3,13 +3,8 @@
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{ leftList }">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<!-- 警告:微信小程序不支持嵌入lazyload组件,请自行如下使用image标签 -->
<!-- #ifndef MP-WEIXIN -->
<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件,比如下方的u-lazy-load组件 -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
<!-- #endif -->
<view class="demo-title">{{ item.title }}</view>
<view class="demo-price">{{ item.price }}</view>
<view class="demo-tag">
......@@ -17,7 +12,6 @@
<view class="demo-tag-text">放心购</view>
</view>
<view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效,因为它不支持在template中引入组件 -->
<view class="u-close">
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
</view>
......@@ -25,12 +19,7 @@
</template>
<template v-slot:right="{ rightList }">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
<!-- #endif -->
<view class="demo-title">{{ item.title }}</view>
<view class="demo-price">{{ item.price }}</view>
<view class="demo-tag">
......@@ -38,7 +27,6 @@
<view class="demo-tag-text">放心购</view>
</view>
<view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效,因为它不支持在template中引入组件 -->
<view class="u-close">
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
</view>
......@@ -190,6 +178,7 @@ page {
font-size: 30rpx;
margin-top: 5px;
color: $u-main-color;
word-break: break-all;
}
.demo-tag {
......
......@@ -15,11 +15,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">取消按钮</view>
<u-subsection vibrateShort :list="['是', '否']" @change="cancelChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="cancelChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">点击遮罩关闭</view>
<u-subsection vibrateShort :list="['是', '否']" @change="maskClickChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="maskClickChange"></u-subsection>
</view>
</view>
</view>
......@@ -35,7 +35,8 @@
text: '朱颜辞镜花辞树',
disabled: true
}, {
text: '正是江南好风景'
text: '正是江南好风景',
subText: '春江水暖鸭先知'
}, {
text: '落花时节又逢君'
}],
......
......@@ -14,19 +14,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">左侧图标</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showIconChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="showIconChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">关闭图标</view>
<u-subsection vibrateShort current="1" :list="['显示', '隐藏']" @change="closeAbleChange"></u-subsection>
<u-subsection current="1" :list="['显示', '隐藏']" @change="closeAbleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主题</view>
<u-subsection vibrateShort current="3" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
<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 vibrateShort :current="current" :list="['开启', '关闭']" @change="showChange"></u-subsection>
<u-subsection :current="current" :list="['开启', '关闭']" @change="showChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -10,27 +10,27 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">数值显示</view>
<u-subsection current="1" vibrateShort :list="[0, 8, 15, 106, 209]" @change="countChange"></u-subsection>
<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 vibrateShort current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">尺寸</view>
<u-subsection vibrateShort :list="['default', 'mini']" @change="sizeChange"></u-subsection>
<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">位置偏移</view>
<u-subsection vibrateShort current="1" :list="['[20, 20]', '[-8, -8]', '[-20, -20]']" @change="offsetChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="isCenterChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="isCenterChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -12,31 +12,31 @@
</view>
<view class="u-config-item">
<view class="u-item-title">主题选择</view>
<u-subsection vibrateShort :list="['default', 'primary', 'error', 'warning', 'success']" @change="typeChange"></u-subsection>
<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 vibrateShort :list="['默认', '中等', '迷你']" @change="sizeChange"></u-subsection>
<u-subsection :list="['默认', '中等', '迷你']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['直角', '圆角']" @change="shapeChange"></u-subsection>
<u-subsection :list="['直角', '圆角']" @change="shapeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">镂空</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">水波纹(感觉哪里有问题?点击顶部的按钮试试)</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="rippleChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="rippleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">细边框</view>
<u-subsection vibrateShort :list="['是', '否']" @change="hairLineChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">加载中</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="loadingChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="loadingChange"></u-subsection>
</view>
</view>
</view>
......@@ -115,7 +115,7 @@
padding: 30rpx;
}
.box /deep/ button {
.box ::v-deep button {
margin-bottom: 40rpx;
}
</style>
......@@ -4,11 +4,8 @@
<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-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>
......@@ -26,89 +23,91 @@
</view>
<view class="u-config-item">
<view class="u-item-title">更换图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection>
</view>
<!-- 小程序无法动态切换slot -->
<!-- #ifndef MP -->
<view class="u-config-item">
<view class="u-item-title">自定义右侧内容</view>
<u-subsection vibrateShort :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
<u-subsection :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
</view>
<!-- #endif -->
<view class="u-config-item">
<view class="u-item-title">描述信息</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">更换标题</view>
<u-subsection vibrateShort :list="['是', '否']" @change="titleChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">右侧箭头</view>
<u-subsection vibrateShort :list="['是', '否']" @change="arrowChange"></u-subsection>
<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 ? '青山一道同云雨' : '明月何曾是两乡'
export default {
data() {
return {
icon: 'setting',
arrow: true,
label: '',
title: '青山一道同云雨',
rightSlot: true,
checked: false,
}
},
rightSlotChange(index) {
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
if(index == 0) this.arrow = true;
else this.arrow = false;
computed: {
hoverClass() {
// 如果右侧是switch步进器组件的话,去掉cell的点击反馈,因为这个时候点击的反馈应该在switch上
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
}
},
click(index) {
// console.log(index);
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;
}
.gab {
background-color: rgb(245, 245, 245);
height: 20rpx;
}
.wrap {
height: 100vh;
background-color: rgb(241, 241, 241);
}
.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;
}
.box {
padding: 30rpx 00rpx;
font-size: 28rpx;
color: $u-type-info;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
......@@ -4,7 +4,7 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-collapse :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
<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>
......@@ -17,15 +17,15 @@
</view>
<view class="u-config-item">
<view class="u-item-title">手风琴模式</view>
<u-subsection vibrateShort :list="['是', '否']" @change="accordionChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="accordionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">右侧箭头</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="arrowChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="arrowChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view>
</view>
......@@ -59,7 +59,8 @@
accordion: true,
arrow: true,
hoverClass: 'hover2',
itemStyle: {}
itemStyle: {},
key: true
}
},
methods: {
......@@ -68,6 +69,7 @@
},
arrowChange(index) {
this.arrow = index == 0 ? true : false;
this.changeStatus();
},
styleChange(index) {
if(index == 0) {
......@@ -79,6 +81,7 @@
} else {
this.itemStyle = {}
}
this.changeStatus();
},
change(index) {
let str = '';
......@@ -97,6 +100,12 @@
},
itemChange(e) {
console.log(e);
},
changeStatus() {
this.key = false;
this.$nextTick(function(){
this.key = true;
})
}
}
}
......
......@@ -15,23 +15,23 @@
</view>
<view class="u-config-item">
<view class="u-item-title">调整时间</view>
<u-subsection vibrateShort :list="['60', '86400', '983272']" @change="timestampChange"></u-subsection>
<u-subsection :list="['60', '86400', '983272']" @change="timestampChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">分隔符</view>
<u-subsection vibrateShort :list="['英文冒号', '中文名称']" @change="separatorChange"></u-subsection>
<u-subsection :list="['英文冒号', '中文名称']" @change="separatorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示天</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showDaysChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="showDaysChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">字体大小</view>
<u-subsection vibrateShort current="1" :list="['26', '30', '34']" @change="fontSizeChange"></u-subsection>
<u-subsection current="1" :list="['26', '30', '34']" @change="fontSizeChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -25,23 +25,23 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
<u-subsection :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">目标值</view>
<u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
<u-subsection :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">滚动时间</view>
<u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
<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 vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">字体加粗</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="boldChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="boldChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -16,15 +16,15 @@
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">背景颜色</view>
<u-subsection vibrateShort :list="['default', 'primary', 'error', 'warning', 'success']" @change="bgColorChange"></u-subsection>
<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 vibrateShort :list="['30', '50', '70']" @change="heightChange"></u-subsection>
<u-subsection :list="['30', '50', '70']" @change="heightChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">上下外边距</view>
<u-subsection vibrateShort :list="['30', '50', '70']" @change="marginChange"></u-subsection>
<u-subsection :list="['30', '50', '70']" @change="marginChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -90,15 +90,15 @@
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示边框</view>
<u-subsection vibrateShort :list="['是', '否']" @change="borderChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="borderChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否可滑动</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="isSwiperChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="isSwiperChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">修改列数</view>
<u-subsection vibrateShort :list="['3', '4']" @change="colChange"></u-subsection>
<u-subsection :list="['3', '4']" @change="colChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -3,8 +3,8 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-row gutter="20" :justify="justify">
<u-col :span="span" :offset="offset" @click="click">
<u-row :justify="justify" @click="rowClick">
<u-col :span="span" :offset="offset" @click="click" stop>
<view class="demo-layout bg-purple-dark">
</view>
......@@ -28,16 +28,18 @@
</view>
<view class="u-config-item">
<view class="u-item-title">每个栅格占用栏数(演示共3个栅格)</view>
<u-subsection vibrateShort :current="2" :list="[1, 2, 3, 4]" @change="spanChange"></u-subsection>
<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 vibrateShort :list="[0, 1, 2, 3]" @change="offsetChange"></u-subsection>
<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 vibrateShort :list="['start', 'end', 'around', 'between']" @change="justifyChange"></u-subsection>
<u-subsection :list="['start', 'end', 'around', 'between']" @change="justifyChange"></u-subsection>
</view>
<!-- #endif -->
</view>
</view>
</template>
......@@ -52,6 +54,12 @@
}
},
methods: {
click() {
console.log('col click');
},
rowClick() {
console.log('row click');
},
spanChange(e) {
switch (e) {
case 0:
......@@ -129,7 +137,7 @@
// H5中,电脑端文档演示时,可能会导致演示块挤出边界,特别处理。
// 真实使用环境不会产生此问题
/* #ifdef H5 */
.u-demo-area /deep/ .u-row {
.u-demo-area ::v-deep .u-row {
display: flex;
flex-wrap: wrap;
}
......
......@@ -12,11 +12,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">下划线</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="underLineChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="underLineChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -4,7 +4,7 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast" />
<u-loadmore :status="status" bg-color="rgb(250, 250, 250)" :loadText="loadText"
<u-loadmore :status="status" :loadText="loadText"
:icon-type="iconType" :is-dot="isDot" @loadmore="loadmore"/>
</view>
</view>
......@@ -14,19 +14,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection :current="current" vibrateShort :list="['加载前', '加载中', '加载后', '没有更多']" @change="statusChange"></u-subsection>
<u-subsection :current="current" :list="['加载前', '加载中', '加载后', '没有更多']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义提示语</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="loadTextChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="loadTextChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">加载中图标样式</view>
<u-subsection vibrateShort :list="['circle', 'flower']" @change="styleChange"></u-subsection>
<u-subsection :list="['circle', 'flower']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">没有更多时用点替代</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -20,19 +20,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">缩放效果</view>
<u-subsection vibrateShort :list="['是', '否']" @change="zoomChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="zoomChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">内容填充</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">动画时长(ms)</view>
<u-subsection vibrateShort current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection>
<u-subsection current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -14,11 +14,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['方框', '下划线', '中划线']" @change="modeChange"></u-subsection>
<u-subsection :list="['方框', '下划线', '中划线']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">输入长度</view>
<u-subsection vibrateShort :list="[4, 5, 6]" @change="maxLengthChange"></u-subsection>
<u-subsection :list="[4, 5, 6]" @change="maxLengthChange"></u-subsection>
</view>
<view class="u-config-item">
<!-- #ifdef MP-WEIXIN -->
......@@ -27,19 +27,19 @@
<!-- #ifndef MP-WEIXIN -->
<view class="u-item-title">初始值</view>
<!-- #endif -->
<u-subsection vibrateShort :list="['空', '23', '678']" @change="valueChange"></u-subsection>
<u-subsection :list="['空', '23', '678']" @change="valueChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">呼吸灯效果</view>
<u-subsection vibrateShort :list="['是', '否']" @change="breatheChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="breatheChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否加粗</view>
<u-subsection vibrateShort :list="['是', '否']" @change="boldChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="boldChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">点替代输入值</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="dotFillChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="dotFillChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -4,7 +4,7 @@
<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"></u-number-box>
:step="step" :disabled="disabled" @change="change" @focus="focus"></u-number-box>
</view>
</view>
<view class="u-config-wrap">
......@@ -13,19 +13,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">初始值</view>
<u-subsection vibrateShort :list="[1, 5, 18]" @change="valueChange"></u-subsection>
<u-subsection :list="[1, 5, 18]" @change="valueChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否禁用</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">步进值</view>
<u-subsection vibrateShort :list="[1, 3, 5, 8]" @change="stepChange"></u-subsection>
<u-subsection :list="[1, 3, 5, 8]" @change="stepChange"></u-subsection>
</view>
</view>
</view>
......@@ -64,6 +64,9 @@ export default {
},
change(e) {
//console.log(e.value);
},
focus() {
console.log('focus');
}
}
};
......
......@@ -28,19 +28,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="show == false ? 1 : 0" :list="['打开', '关闭']" @change="showChange"></u-subsection>
<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 vibrateShort :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection>
<u-subsection :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">关闭按钮</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="closeChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="closeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">关闭按钮位置</view>
<u-subsection vibrateShort :current="1" :list="['左上角', '右上角', '左下角', '右下角']" @change="closePosChange"></u-subsection>
<u-subsection :current="1" :list="['左上角', '右上角', '左下角', '右下角']" @change="closePosChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -20,19 +20,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :current="current" :list="['线型', '圆型']" @change="modeChange"></u-subsection>
<u-subsection :current="current" :list="['线型', '圆型']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">增减</view>
<u-subsection vibrateShort :list="['减少30%', '增加30%']" @change="calcChange"></u-subsection>
<u-subsection :list="['减少30%', '增加30%']" @change="calcChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义样式(线型时有效)</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">动态条纹(线型时有效)</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="stripedChange"></u-subsection>
<u-subsection current="1" :list="['是', '否']" @change="stripedChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -12,23 +12,23 @@
</view>
<view class="u-config-item">
<view class="u-item-title">更换主标题</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="titleChange"></u-subsection>
<u-subsection :current="1" :list="['是', '否']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">竖条状态</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="showLineChange"></u-subsection>
<u-subsection :list="['显示', '隐藏']" @change="showLineChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示右边部分</view>
<u-subsection vibrateShort :list="['是', '否']" @change="rightChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="rightChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主标题粗体</view>
<u-subsection vibrateShort :list="['是', '否']" @change="boldChange"></u-subsection>
<u-subsection :list="['是', '否']" @change="boldChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主标题颜色</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="colorChange"></u-subsection>
<u-subsection :list="['默认', '自定义']" @change="colorChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -12,19 +12,19 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择(为满足演示需要,切换会有抖动,非性能问题)</view>
<u-subsection vibrateShort mode="button" :list="['button', 'subsection']" @change="modeChange"></u-subsection>
<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 vibrateShort mode="button" :list="[0, 1, 2]" @change="currentChange"></u-subsection>
<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 vibrateShort mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
<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 vibrateShort mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
<u-subsection mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
</view>
</view>
</view>
......
<template>
<view style="padding-top: 200px;">
<u-button @click="show = true" :custom-style="{
color: 'red',
borderColor: 'blue'
}">打开</u-button>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
list: [{
name: '待收货'
}, {
name: '待付款'
}, {
name: '待评价'
}],
current: 0
}
},
onLoad() {
// setTimeout(() => {
// this.show = false;
// }, 2000)
},
methods: {
close() {
//console.log('close');
},
change(index) {
this.current = index;
}
}
}
</script>
<view></view>
</template>
\ No newline at end of file
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: '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: 'Loading 加载动画',
title_en: 'Loading',
}]
},
]
<template>
<view class="wrap">
<page-nav :desc="desc"></page-nav>
<page-nav :desc="desc" title="nav.components"></page-nav>
<view class="list-wrap">
<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">
<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>
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view>
</template>
......@@ -19,7 +20,7 @@
data() {
return {
list: list,
desc: '众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让你快速集成,开箱即用。',
//desc: '众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让你快速集成,开箱即用。',
}
},
computed: {
......@@ -27,16 +28,30 @@
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({
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
}
}
}
......@@ -49,6 +64,7 @@
</style>
<style lang="scss" scoped>
.u-cell-icon {
width: 36rpx;
height: 36rpx;
......
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: 'Throttle | Debounce 节流防抖',
title_en: 'Throttle | Debounce',
},
{
path: 'deepMerge',
icon: 'deepMerge',
title: 'deepMerge 对象深度合并',
title: 'DeepMerge 对象深度合并',
title_en: 'DeepMerge',
},{
path: 'deepClone',
icon: 'deepClone',
title: 'deepClone 对象深度克隆',
title: 'DeepClone 对象深度克隆',
title_en: 'DeepClone',
},
{
path: 'timeFormat',
icon: 'timeFormat',
title: 'TimeFormat 时间格式化',
title_en: 'TimeFormat',
},{
path: 'timeFrom',
icon: 'timeFrom',
title: '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',
}
]
}
......
<template>
<view class="wrap">
<page-nav :desc="desc"></page-nav>
<page-nav :desc="desc" title="nav.js"></page-nav>
<view class="list-wrap">
<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">
<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>
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view>
</template>
......@@ -19,7 +20,7 @@
data() {
return {
list: list,
desc: '众多的贴心小工具,是你开发过程中召之即来的利器,让你飞镖在手,百步穿杨'
// desc: '众多的贴心小工具,是你开发过程中召之即来的利器,让你飞镖在手,百步穿杨'
}
},
computed: {
......@@ -27,13 +28,27 @@
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
}
}
}
......
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',
......@@ -26,39 +30,48 @@ export default [
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: 'CitySelect 城市选择',
title_en: 'CitySelect',
}
]
}
......
<template>
<view class="wrap">
<page-nav :desc="desc"></page-nav>
<page-nav :desc="desc" title="nav.template"></page-nav>
<view class="list-wrap">
<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">
<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>
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view>
</template>
......@@ -19,7 +20,7 @@
data() {
return {
list: list,
desc: '收集众多的常用页面和布局,减少开发者的重复工作,让你专注逻辑,事半功倍'
// desc: '收集众多的常用页面和布局,减少开发者的重复工作,让你专注逻辑,事半功倍'
}
},
computed: {
......@@ -27,13 +28,27 @@
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>
import uAvatarCropper from 'uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue'
export default {
extends: uAvatarCropper,
}
</script>
<script>
import UFullScreen from 'uview-ui/components/u-full-screen/u-full-screen.vue'
export default {
extends: UFullScreen,
}
</script>
......@@ -17,11 +17,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">主题</view>
<u-subsection vibrateShort :list="['primary', 'success', 'error', 'warning', 'info']" @change="modeChange"></u-subsection>
<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 vibrateShort :list="['主要文字', '常规文字', '次要文字', '占位文字', '边框颜色']" @change="colorChange"></u-subsection>
<u-subsection :list="['主要文字', '常规文字', '次要文字', '占位文字', '边框颜色']" @change="colorChange"></u-subsection>
</view>
</view>
</view>
......
......@@ -14,11 +14,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">GRB转HEX</view>
<u-subsection vibrateShort :list="['rgb(12,57,231)', 'rgb(15,148,32)', 'rgb(91,52,210)']" @change="rgbToHexChange"></u-subsection>
<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 vibrateShort :list="['#0edc8a', '#d0a73c', '#3308dd']" @change="hexToRgbChange"></u-subsection>
<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>
......
......@@ -20,15 +20,15 @@
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['节流', '防抖']" @change="modeChange"></u-subsection>
<u-subsection :list="['节流', '防抖']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">时间间隔</view>
<u-subsection vibrateShort current="1" :list="['500ms', '1000ms', '2000ms']" @change="timeoutChange"></u-subsection>
<u-subsection current="1" :list="['500ms', '1000ms', '2000ms']" @change="timeoutChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">执行时机</view>
<u-subsection vibrateShort :list="['开始处', '结束处']" @change="immediateChange"></u-subsection>
<u-subsection :list="['开始处', '结束处']" @change="immediateChange"></u-subsection>
</view>
</view>
</view>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment