提交 2f5818eb 编写于 作者: Y yurj26

init

上级
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@import './common/uni.css';
</style>
/* #ifndef APP-PLUS-NVUE */
/* page {
min-height: 100%;
height: auto;
} */
/* #endif */
/* 解决头条小程序字体图标不显示问题,因为头条运行时自动插入了span标签,且有全局字体 */
/* #ifdef MP-TOUTIAO */
/* text :not(view) {
font-family: uniicons;
} */
/* #endif */
.uni-icon {
/* font-family: uniicons;
font-weight: normal; */
width: 14px;
height: 14px;
}
.uni-container {
padding: 15px;
background-color: #f8f8f8;
}
.uni-header-logo {
/* #ifdef H5 */
display: flex;
/* #endif */
padding: 15px 15px;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}
.uni-header-image {
width: 80px;
height: 80px;
}
.uni-hello-text {
margin-bottom: 20px;
color: #7A7E83;
}
.hello-text {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
}
.hello-link {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
}
.uni-panel {
margin-bottom: 12px;
}
.text-disabled {
color: #a0a0a0;
}
.uni-panel-h {
/* #ifdef H5 */
display: flex;
/* #endif */
background-color: #ffffff;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 12px;
}
/*
.uni-panel-h:active {
background-color: #f8f8f8;
}
*/
.uni-panel-h-on {
background-color: #f0f0f0;
}
.uni-panel-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-panel-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
transform: rotate(0deg);
transition-duration: 0s;
transition-property: transform;
}
.uni-panel-icon-on {
transform: rotate(180deg);
}
.uni-navigate-item {
/* #ifdef H5 */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
justify-content: space-between;
/* #ifdef H5 */
/* cursor: pointer; */
/* #endif */
}
.uni-navigate-item:active {
background-color: #f8f8f8;
}
.uni-navigate-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}
.arrow {
width: 8px;
height: 8px;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-up {
transform: rotate(45deg);
}
.arrow-down {
transform: rotate(-135deg);
}
\ No newline at end of file
.uni-padding-wrap {
padding: 0 30rpx;
}
.uni-title {
padding: 20rpx 0;
}
.uni-title-text {
font-size: 30rpx;
font-weight: 500;
}
.uni-subtitle-text {
margin-top: 10rpx;
font-size: 24rpx;
color: #888;
}
.uni-common-mb {
margin-bottom: 30rpx;
}
.uni-common-pb {
padding-bottom: 30rpx;
}
.uni-common-pl {
padding-left: 30rpx;
}
.uni-common-mt {
margin-top: 30rpx;
}
.uni-hello-text {
color: #7A7E83;
}
.uni-list {
background-color: #FFFFFF;
position: relative;
display: flex;
flex-direction: column;
}
.uni-list-cell {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-list-cell-hover {
background-color: #eee;
}
.uni-list-cell-pd {
padding: 22rpx 30rpx;
}
.uni-list-cell-left {
font-size: 28rpx;
padding: 0 30rpx;
}
.uni-list-cell-db,
.uni-list-cell-right {
flex: 1;
}
.uni-label {
width: 210rpx;
/* word-wrap: break-word;
word-break: break-all;
text-indent:20rpx; */
}
.uni-input {
height: 50rpx;
padding: 15rpx 25rpx;
line-height:50rpx;
font-size:28rpx;
background:#FFF;
flex: 1;
}
.uni-flex {
/* #ifdef H5 */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-flex-item {
flex: 1;
}
.uni-row {
flex-direction: row;
}
.uni-column {
flex-direction: column;
}
/* 背景色 */
.uni-bg-red {
background: #F76260;
color: #FFF;
}
.uni-bg-green {
background: #09BB07;
color: #FFF;
}
.uni-bg-blue {
background: #007AFF;
color: #FFF;
}
.uni-btn-v {
padding: 10rpx 0;
}
.uni-btn {
margin-top: 20rpx;
}
.uni-link {
color: #576B95;
font-size: 26rpx;
}
.uni-center {
flex-direction: row;
justify-content: center;
}
/* textarea */
.uni-textarea-box {
background: #ffffff;
}
.uni-textarea {
padding: 18rpx;
line-height: 1.6;
font-size: 28rpx;
}
\ No newline at end of file
<template name="page-head">
<view class="common-page-head">
<view class="common-page-head-title-box">
<text class="common-page-head-title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
name: "page-head",
props: {
title: {
type: String,
default: ""
}
}
}
</script>
<style>
.common-page-head {
padding: 35rpx;
flex-direction: row;
justify-content: center;
}
.common-page-head-title-box {
padding: 0 40rpx;
height: 88rpx;
border-bottom: 2rpx solid #D8D8D8;
}
.common-page-head-title {
line-height: 88rpx;
font-size: 30rpx;
color: #BEBEBE;
}
</style>
\ No newline at end of file
<template>
<view class="uni-row">
<text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
</view>
</template>
<script>
/**
* @description u-link是一个外部网页超链接组件,在小程序内打开内部web-view组件或复制url,在app内打开外部浏览器,在h5端打开新网页
* @property {String} href 点击后打开的外部网页url,小程序中必须以https://开头
* @property {String} text 显示的文字
* @property {Boolean} inWhiteList 是否在小程序白名单中,如果在的话,在小程序端会直接打开内置web-view,否则会只会复制url,提示在外部打开
* @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
*/
export default {
name: 'u-link',
props: {
href: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
inWhiteList: {
type: Boolean,
default: false
}
},
methods: {
openURL() {
// // #ifdef APP-PLUS
// plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
// // #endif
// // #ifdef H5
// window.open(this.href)
// // #endif
// // #ifdef MP
// if (this.inWhiteList) { //如果在小程序的网址白名单中,会走内置webview打开,否则会复制网址提示在外部浏览器打开
// uni.navigateTo({
// url: '/pages/component/web-view/web-view?url=' + this.href
// });
// } else {
// uni.setClipboardData({
// data: this.href
// });
// uni.showModal({
// content: '本网址无法直接在小程序内打开。已自动复制网址,请在手机浏览器里粘贴该网址',
// showCancel: false
// });
// }
// // #endif
}
}
}
</script>
<style>
.text {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
/* border-bottom: 1px solid #7A7E83; */
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
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>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
import App from './App'
import PageHead from './components/page-head/page-head'
import ULink from './components/u-link/u-link'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.component('page-head', PageHead)
app.component('u-link', ULink)
return {
app
}
}
\ No newline at end of file
{
"name" : "hello-uniapp x",
"appid" : "__UNI__4517034",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"uni-app-x" : {},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabBar/component/component",
"style": {
"navigationBarTitleText": "内置组件"
}
},
{
"path": "pages/component/view/view",
"style": {
"navigationBarTitleText": "view"
}
},
{
"path": "pages/component/scroll-view/scroll-view",
"style": {
"navigationBarTitleText": "scroll-view"
}
},
{
"path": "pages/component/text/text",
"style": {
"navigationBarTitleText": "text"
}
},
{
"path": "pages/component/progress/progress",
"style": {
"navigationBarTitleText": "progress"
}
},
{
"path": "pages/component/button/button",
"style": {
"navigationBarTitleText": "button"
}
},
{
"path": "pages/component/radio/radio",
"style": {
"navigationBarTitleText": "radio"
}
},
{
"path": "pages/component/checkbox/checkbox",
"style": {
"navigationBarTitleText": "checkbox"
}
},
{
"path": "pages/component/input/input",
"style": {
"navigationBarTitleText": "input"
}
},
{
"path": "pages/component/textarea/textarea",
"style": {
"navigationBarTitleText": "textarea"
}
},
{
"path": "pages/component/image/image",
"style": {
"navigationBarTitleText": "image"
}
},
{
"path": "pages/tabBar/API/API",
"style": {
"navigationBarTitleText": "接口"
}
},
{
"path": "pages/API/navigator/navigator",
"style": {
"navigationBarTitleText": "页面跳转"
}
},
{
"path": "pages/API/navigator/new-page/new-uvue-page-1",
"style": {
"navigationBarTitleText": "新UVUE页面1"
}
},
{
"path": "pages/API/navigator/new-page/new-uvue-page-2",
"style": {
"navigationBarTitleText": "新UVUE页面2"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "", //模式名称
"path": "", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
}]
}
}
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="navigateTo" class="uni-btn">跳转新页面,并传递数据</button>
<button @tap="navigateBack" class="uni-btn">返回上一页</button>
<button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
<!-- <button @tap="switchTab" class="uni-btn">切换到模板选项卡</button> -->
<button @tap="reLaunch" class="uni-btn">关闭所有页面,打开首页</button>
<!-- #ifdef APP-PLUS -->
<button @tap="customAnimation" class="uni-btn">使用自定义动画打开页面</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS || H5 -->
<button @tap="preloadPage" class="uni-btn">预载复杂页面</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button @tap="unPreloadPage" class="uni-btn">取消页面预载</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS || H5 -->
<!-- <button @tap="navigateToPreloadPage" class="uni-btn">打开复杂页面</button> -->
<!-- #endif -->
</view>
</view>
</view>
</template>
<script lang="ts">
const preloadPageUrl = '/pages/extUI/calendar/calendar'
export default {
data() {
return {
title: 'navigate'
}
},
methods: {
navigateTo() {
uni.navigateTo({
url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
})
},
navigateBack() {
uni.navigateBack({
delta: 1
});
},
redirectTo() {
uni.redirectTo({
url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
});
},
switchTab() {
uni.switchTab({
url: '/pages/tabBar/template/template'
});
},
reLaunch() {
// if (this.hasLeftWin) {
// uni.reLaunch({
// url: '/pages/component/view/view'
// });
// return;
// }
uni.reLaunch({
url: '/pages/tabBar/component/component'
});
},
customAnimation() {
uni.navigateTo({
url: '/pages/API/navigator/new-page/new-uvue-page-1?data=使用自定义动画打开页面',
animationType: 'slide-in-bottom',
animationDuration: 200
})
},
preloadPage() {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
// uni.preloadPage({
// url: preloadPageUrl,
// success(){
// uni.showToast({
// title:'页面预载成功'
// })
// },
// fail(){
// uni.showToast({
// title:'页面预载失败'
// })
// }
// })
},
unPreloadPage() {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
// uni.unPreloadPage({
// url: preloadPageUrl
// })
},
navigateToPreloadPage() {
uni.navigateTo({
url: preloadPageUrl
})
}
}
}
</script>
\ No newline at end of file
<template>
<view class="root">
<view class="page-body">
<view class="new-page__text-box">
<text class="new-page__text">从上个页面接收到参数:{{data}}</text>
</view>
<view class="new-page__color" @click="changeColor" :style="{backgroundColor:stateData.currentColor}">
<text class="new-page__color-text">点击改变颜色</text>
</view>
<view class="new-page__text-box">
<text class="new-page__text">点击上方色块在页面之间进行通讯</text>
</view>
<view class="new-page__button">
<button class="new-page__button-item" @click="navToUvue">跳转UVUE页面</button>
<button class="new-page__button-item" @click="navToVue">跳转VUE页面</button>
</view>
</view>
</view>
</template>
<script lang="ts">
import { State, state, setColorIndex } from '@/store/index.uts'
export default {
data() {
return {
data: '',
stateData: state as State
}
},
methods: {
changeColor() {
setColorIndex(state.colorIndex > 1 ? 0 : state.colorIndex + 1)
},
navToUvue() {
uni.navigateTo({
url: 'pages/API/navigator/new-page/new-uvue-page-2'
})
},
navToVue() {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
// uni.navigateTo({
// url:'new-vue-page-2'
// })
}
},
onLoad(e: Map<string, string>) {
// TODO 类型后续会做调整
this.data = e['data']!
}
}
</script>
<style>
.new-page__text {
font-size: 14px;
color: #666666;
}
.root {
flex-direction: column;
}
.page-body {
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 50px;
}
.new-page__text-box {
padding: 20px;
}
.new-page__color {
width: 200px;
height: 100px;
justify-content: center;
align-items: center;
}
.new-page__color-text {
font-size: 14px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
}
.new-page__button-item {
margin-top: 15px;
width: 300px;
}
</style>
\ No newline at end of file
<template>
<view class="root">
<view class="page-body">
<view class="new-page__text-box">
<text class="new-page__text">新UVUE页面2</text>
</view>
<view class="new-page__color" @click="setColor" :style="{backgroundColor: stateData.currentColor}">
<text class="new-page__color-text">点击改变颜色</text>
</view>
<view class="new-page__text-box">
<text class="new-page__text">点击上方色块在页面之间进行通讯</text>
</view>
</view>
</view>
</template>
<script>
import {
State,
state,
setColorIndex
} from '@/store/index.uts'
export default {
data() {
return {
data: '',
stateData: state as State
}
},
methods: {
setColor() {
setColorIndex(state.colorIndex > 1 ? 0 : state.colorIndex + 1)
}
}
}
</script>
<style>
.new-page__text {
font-size: 14px;
color: #666666;
}
.root {
flex-direction: column;
}
.page-body {
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 50px;
}
.new-page__text-box {
padding: 20px;
}
.new-page__color {
width: 200px;
height: 100px;
justify-content: center;
align-items: center;
}
.new-page__color-text {
font-size: 14px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
}
.new-page__button-item {
margin-top: 15px;
width: 300px;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">key</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
@input="keyChange" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">value</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
@input="dataChange" />
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据</button>
<button class="uni-btn" @tap="getStorage">读取数据</button>
<button class="uni-btn" @tap="clearStorage">清理数据</button>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'get/set/clearStorage',
key: '',
data: ''
}
},
methods: {
keyChange: function (e : InputEvent) {
this.key = e.detail.value
},
dataChange: function (e : InputEvent) {
this.data = e.detail.value
},
getStorage: function () {
var key = this.key;
if (key.length == 0) {
uni.showModal({
title: '读取数据失败',
content: "key 不能为空",
showCancel: false
})
} else {
uni.getStorage({
key: key,
success: (res) => {
uni.showModal({
title: '读取数据成功',
content: "data: '" + res.data + "'",
showCancel: false
})
},
fail: () => {
uni.showModal({
title: '读取数据失败',
content: "找不到 key 对应的数据",
showCancel: false
})
}
})
}
},
setStorage: function () {
var key = this.key
var data = this.data
if (key.length == 0) {
uni.showModal({
title: '保存数据失败',
content: 'key 不能为空',
showCancel: false
})
} else {
uni.setStorage({
key: key,
data: data,
success: () => {
uni.showModal({
title: '存储数据成功',
content: data,
showCancel: false
})
},
fail: () => {
uni.showModal({
title: '储存数据失败!',
showCancel: false
})
}
})
}
},
clearStorage: function () {
this.key = ''
this.data = ''
uni.clearStorageSync()
uni.showModal({
title: '清除数据成功',
content: ' ',
showCancel: false
})
}
}
}
</script>
<style>
.btn-setstorage {
background-color: #007aff;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary">页面主操作 Normal</button>
<!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
<button type="primary" :disabled="true" class="button">页面主操作 Disabled</button>
<button type="default" class="button">页面次要操作 Normal</button>
<button type="default" :disabled="true" class="button">页面次要操作 Disabled</button>
<button type="warn" class="button">警告类操作 Normal</button>
<button type="warn" :disabled="true" class="button">警告类操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" :plain="true" class="button">按钮</button>
<button type="primary" :disabled="true" :plain="true" class="button">
不可点击的按钮
</button>
<button type="default" :plain="true" class="button">按钮</button>
<button type="default" :disabled="true" :plain="true" class="button">按钮</button>
<view class="uni-flex uni-row">
<button class="button mini-btn" type="primary" size="mini">按钮</button>
<button class="button mini-btn" type="default" size="mini">按钮</button>
<button class="button mini-btn" type="warn" size="mini">按钮</button>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'button',
loading: false,
_timer: 0
}
},
onShow() {
// this.clearTimer();
// this._timer = setTimeout(() => {
// // this.loading = true;
// }, 300)
},
onUnload() {
// this.clearTimer();
// this.loading = false;
},
methods: {
// clearTimer() {
// if (this._timer != 0) {
// clearTimeout(this._timer);
// }
// }
},
}
</script>
<style>
.button {
margin-top: 30rpx;
}
.button-sp-area {
margin: 0 auto;
width: 60%;
}
.mini-btn {
margin-right: 10rpx;
margin-bottom: 30rpx;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
默认样式
</text>
</view>
<view>
<checkbox-group class="uni-flex uni-row">
<checkbox value="cb1" :checked="true" style="margin-right: 30rpx;">选中</checkbox>
<checkbox value="cb">未选中</checkbox>
</checkbox-group>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
不同颜色和尺寸的checkbox
</text>
</view>
<view>
<checkbox-group class="uni-flex uni-row">
<checkbox value="cb1" :checked="true" color="#FFCC33"
style="transform:scale(0.7); margin-right: 30rpx;">选中
</checkbox>
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)">未选中</checkbox>
</checkbox-group>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
推荐展示样式
</text>
<text class="uni-subtitle-text">
使用 uni-list 布局
</text>
</view>
</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<view class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<checkbox :value="item.value" :checked="item.checked">{{item.name}}</checkbox>
</view>
</view>
</checkbox-group>
</view>
</view>
</template>
<script lang="ts">
type ItemType = {
value : string,
name : string,
checked : boolean
}
export default {
data() {
return {
title: 'checkbox 复选框',
items: [{
value: 'USA',
name: '美国',
checked: false
},
{
value: 'CHN',
name: '中国',
checked: true
},
{
value: 'BRA',
name: '巴西',
checked: false
},
{
value: 'JPN',
name: '日本',
checked: false
},
{
value: 'ENG',
name: '英国',
checked: false
},
{
value: 'FRA',
name: '法国',
checked: false
}
] as ItemType[]
}
},
methods: {
checkboxChange: function (value : string[]) {
// TODO 后续更改参数
var items = this.items,
values = value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
const item = items[i]
if (values.indexOf(item.value) >= 0) {
item.checked = true
} else {
item.checked = false
}
}
}
}
}
</script>
<style>
.uni-list-cell {
justify-content: flex-start
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">
示例1
</text>
<text class="uni-subtitle-text">
本地图片
</text>
</view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
<image class="image" mode="widthFix" src="/static/uni.png" />
</view>
<view class="uni-title">
<text class="uni-title-text">
示例2
</text>
<text class="uni-subtitle-text">
网络图片
</text>
</view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
<image class="image" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'image'
}
}
}
</script>
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
}
</style>
\ No newline at end of file
<template>
<view class="nvue-page-root">
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<!-- <view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" :focus="true" placeholder="自动获得焦点" ref="input"/>
</view>
</view> -->
<!-- #ifdef APP-PLUS -->
<!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" />
</view>
</view> -->
<!-- #endif -->
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为搜索</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
</view>
<!-- #ifndef H5 -->
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为发送</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
</view>
</view>
<!-- #endif -->
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">控制最大输入长度的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" :maxlength="10" placeholder="最大输入长度为10" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">实时获取输入值:{{inputValue}}</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">控制输入的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" @input="replaceInput" :value="changeValue" placeholder="连续的两个1会变成2" />
</view>
</view>
<!-- #ifndef MP-BAIDU -->
<!-- <view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
</view>
</view> -->
<!-- #endif -->
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">数字输入的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">密码输入的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" :password="true" type="text" placeholder="这是一个密码输入框" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">带小数点的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
</view>
</view>
<!-- <view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view>
</view> -->
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">控制占位符颜色的 input</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
<image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"></image>
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png': '/static/icons/eye.png'" @click="changePassword"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'input',
focus: false,
inputValue: '',
showClearIcon: false,
inputClearValue: '',
changeValue: '',
showPassword: true
}
},
methods: {
onKeyInput: function (event : InputEvent) {
this.inputValue = event.detail.value
},
replaceInput: function (event : InputEvent) {
var value = event.detail.value;
if (value == '11') {
this.changeValue = '2';
}
},
clearInput: function(event: InputEvent) {
this.inputClearValue = event.detail.value;
if (event.detail.value.length > 0) {
this.showClearIcon = true;
} else {
this.showClearIcon = false;
}
},
clearIcon: function() {
this.inputClearValue = '';
this.showClearIcon = false;
},
changePassword: function() {
this.showPassword = !this.showPassword;
},
// hideKeyboard: function(event: InputEvent) {
// if (event.detail.value === '123') {
// uni.hideKeyboard();
// }
// },
// onFocus() {
// this.$mp.page.$getAppWebview().setStyle({
// softinputNavBar: 'none'
// })
// },
// onBlur() {
// this.$mp.page.$getAppWebview().setStyle({
// softinputNavBar: 'auto'
// })
// }
}
}
</script>
<style scoped>
.nvue-page-root {
background-color: #F8F8F8;
padding-bottom: 20px;
}
.title {
padding: 5px 13px;
}
.uni-form-item__title {
font-size: 16px;
line-height: 24px;
}
.uni-input-wrapper {
display: flex;
padding: 8px 13px;
flex-direction: row;
flex-wrap: nowrap;
background-color: #FFFFFF;
}
.uni-input {
height: 28px;
line-height: 28px;
font-size: 15px;
padding: 0px;
flex: 1;
background-color: #FFFFFF;
}
.uni-icon {
width: 24px;
height: 24px;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress :percent="pgList[0]" :show-info="true" :stroke-width="3" />
</view>
<view class="progress-box">
<progress :percent="pgList[1]" :stroke-width="3" />
</view>
<view class="progress-box">
<progress :percent="pgList[2]" :stroke-width="3" />
</view>
<view class="progress-box">
<progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" />
</view>
<view class="progress-control">
<button type="primary" @click="setProgress" class="button">设置进度</button>
<button type="warn" @click="clearProgress" class="button">清除进度</button>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[]
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
}
}
}
</script>
<style>
.progress-box {
height: 50rpx;
margin-bottom: 60rpx;
}
.progress-cancel {
margin-left: 40rpx;
}
.button {
margin-top: 20rpx;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
默认样式
</text>
</view>
<view class="uni-flex uni-row">
<radio value="r1" :checked="true" style="margin-right: 30rpx;">选中</radio>
<radio value="r2">未选中</radio>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
不同颜色和尺寸的radio
</text>
</view>
<view class="uni-flex uni-row">
<radio value="r1" :checked="true" color="#FFCC33" style="transform:scale(0.7); margin-right: 30rpx;">选中
</radio>
<radio value="r2" color="#FFCC33" style="transform:scale(0.7)">未选中</radio>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
推荐展示样式
</text>
</view>
</view>
<view class="uni-list">
<radio-group @change="radioChange">
<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
<view>
<radio :value="item.value" :checked="index === current">{{item.name}}</radio>
</view>
</view>
</radio-group>
</view>
</view>
</template>
<script lang="ts">
type ItemType = {
value : string,
name : string,
}
export default {
data() {
return {
title: 'radio 单选框',
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
},
] as ItemType[],
current: 0
}
},
methods: {
radioChange(e : string) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e) {
this.current = i;
break;
}
}
}
}
}
</script>
<style>
.uni-list-cell {
justify-content: flex-start
}
</style>
\ No newline at end of file
<template>
<view>
<page-head title="scroll-view,区域滚动视图"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Vertical Scroll</text>
<text class="uni-subtitle-text">纵向滚动</text>
</view>
<view>
<scroll-view :scrollTop="scrollTop" :scrollY="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
<view id="demo2" class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
<view id="demo3" class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-center uni-common-mt">
<text class="uni-link">点击这里返回顶部</text>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Horizontal Scroll</text>
<text class="uni-subtitle-text">横向滚动</text>
</view>
<view>
<scroll-view class="scroll-view_H" :scrollX="true" @scroll="scroll" :scrollLeft="120">
<view id="demo1" class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
<view id="demo2" class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<view class="uni-common-pb"></view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
scrollTop: 0,
oldScrollTop: 0
}
},
methods: {
upper: function (e : ScrollToUpperEvent) {
console.log(e)
},
lower: function (e : ScrollToLowerEvent) {
console.log(e)
},
scroll: function (e : ScrollEvent) {
this.oldScrollTop = e.detail.scrollTop
},
goTop: function () {
// 解决view层不同步的问题
this.scrollTop = this.oldScrollTop
this.$nextTick(function () {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
<style>
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
width: 100%;
flex-direction: row;
}
.scroll-view-item {
height: 300rpx;
justify-content: center;
align-items: center;
}
.scroll-view-item_H {
width: 690rpx;
height: 300rpx;
justify-content: center;
align-items: center;
}
.text {
font-size: 36rpx;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="text-box" scroll-y="true">
<text class="text">{{text}}</text>
</view>
<view class="uni-btn-v">
<button class="uni-btn" type="primary" :disabled="!canAdd" @click="add">add line</button>
<button class="uni-btn" type="warn" :disabled="!canRemove" @click="remove">remove line</button>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'text',
texts: [
'HBuilder,400万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'HBuilder,400万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'......'
] as string[],
text: '',
canAdd: true,
canRemove: false,
extraLine: [] as string[]
}
},
methods: {
add: function () {
this.extraLine.push(this.texts[this.extraLine.length % 12]);
this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0;
},
remove: function () {
if (this.extraLine.length > 0) {
this.extraLine.pop();
this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0;
}
}
}
}
</script>
<style>
.text-box {
margin-bottom: 40rpx;
padding: 40rpx 0;
display: flex;
height: 300rpx;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
text-align: center;
}
.text {
font-size: 30rpx;
color: #353535;
line-height: 54rpx;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-title uni-common-pl">
<text class="uni-title-text">
输入区域高度自适应,不会出现滚动条
</text>
</view>
<view class="uni-textarea-box">
<textarea @blur="bindTextAreaBlur" :auto-height="true" class="uni-textarea" />
</view>
<view class="uni-title uni-common-pl">
<text class="uni-title-text">
占位符字体是红色的textarea
</text>
</view>
<view class="uni-textarea-box">
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的" class="uni-textarea" />
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'textarea',
focus: false
}
},
methods: {
bindTextAreaBlur: function (e : TextareaBlurEvent) {
console.log(e.detail.value)
}
}
}
</script>
\ No newline at end of file
<template>
<view>
<page-head title="view"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view>
<text class="uni-hello-text">
Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。当设置display: flex后,继续给view等容器组件设置flex-direction:
row或column,就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台,尤其是采用原生渲染的平台。
</text>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
flex-direction: row
</text>
<text class="uni-subtitle-text">
横向布局
</text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red"><text style="color: #fff;">A</text></view>
<view class="flex-item uni-bg-green"><text style="color: #fff;">B</text></view>
<view class="flex-item uni-bg-blue"><text style="color: #fff;">C</text></view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
column
</text>
<text class="uni-subtitle-text">
纵向布局
</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red"><text style="color: #fff;">A</text></view>
<view class="flex-item flex-item-V uni-bg-green"><text style="color: #fff;">B</text></view>
<view class="flex-item flex-item-V uni-bg-blue"><text style="color: #fff;">C</text></view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
更多布局示例
</text>
<text class="uni-subtitle-text">
flex布局演示
</text>
</view>
<view>
<view class="text-box"><text class="text">纵向布局-自动宽度</text></view>
<view class="text-box" style="width: 300rpx;"><text class="text">纵向布局-固定宽度</text></view>
<view class="text-box"><text class="text">横向布局-自动宽度</text></view>
<view class="text-box"><text class="text">横向布局-自动宽度</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
<view class="text-box"><text class="text">横向布局-居中</text></view>
<view class="text-box"><text class="text">横向布局-居中</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
<view class="text-box"><text class="text">横向布局-居右</text></view>
<view class="text-box"><text class="text">横向布局-居右</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">横向布局-平均分布</text></view>
<view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">横向布局-平均分布</text></view>
</view>
<view class="uni-flex uni-row"
style="-webkit-justify-content: space-between;justify-content: space-between;">
<view class="text-box"><text class="text">横向布局-两端对齐</text></view>
<view class="text-box"><text class="text">横向布局-两端对齐</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
<view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">自动占满余量</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
<view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">自动占满</text></view>
<view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
</view>
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
<view class="text-box" style="width: 280rpx;"><text class="text">一行显示不全,wrap折行</text></view>
<view class="text-box" style="width: 280rpx;"><text class="text">一行显示不全,wrap折行</text></view>
<view class="text-box" style="width: 280rpx;"><text class="text">一行显示不全,wrap折行</text></view>
</view>
<view class="uni-flex uni-row">
<view class="text-box"
style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
<text class="text">垂直居顶</text>
</view>
<view class="text-box"
style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
<text class="text">垂直居中</text>
</view>
<view class="text-box"
style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
<text class="text">垂直居底</text>
</view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
组合示例
</text>
<text class="uni-subtitle-text">
flex布局演示
</text>
</view>
<view class="uni-flex uni-row">
<view class="text-box uni-flex"
style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
<image src="/static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
</view>
<view class="uni-flex uni-column"
style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
<view class="text-box"
style="height: 120rpx;justify-content: start;align-items: start;padding-left: 20rpx;">
<text class="text">文字居左,留出左间距</text>
</view>
<view class="uni-flex uni-row">
<view class="text-box" style="-webkit-flex: 1;flex: 1;">
<text class="text">剩余数量</text>
</view>
<view class="text-box" style="-webkit-flex: 1;flex: 1;">
<text class="text">立即购买</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
.flex-item {
width: 33.3%;
height: 200rpx;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-V {
width: 100%;
height: 150rpx;
text-align: center;
line-height: 150rpx;
}
.text-box {
margin: 15rpx 10rpx;
padding: 0 20rpx;
background-color: #ebebeb;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.text {
line-height: 70rpx;
color: #777;
font-size: 26rpx;
}
</style>
\ No newline at end of file
<template>
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/apiIndex.png"></image>
</view>
<view class="uni-hello-text">
<text class="hello-text">以下将演示uni-app接口能力,详细文档见:</text>
<u-link :href="'https://uniapp.dcloud.io/api/'" :text="'https://uniapp.dcloud.io/api/'"
:inWhiteList="true"></u-link>
</view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
type Page = {
name : string,
enable ?: boolean,
url : string
}
type ListItem = {
id : string,
name : string,
open : boolean,
pages : Page[],
url ?: string,
enable ?: boolean
}
export default {
data() {
return {
list: [{
id: "page",
name: "界面",
open: false,
pages: [
{
name: "设置导航条",
url: "set-navigation-bar-title"
},
//#ifdef APP-PLUS
{
name: "原生子窗体",
url: "subnvue",
},
//#endif
{
name: "页面跳转",
url: "navigator",
enable: true
},
//#ifndef MP-TOUTIAO
{
name: "设置TabBar",
url: "set-tabbar",
},
//#endif
{
name: "下拉刷新",
url: "pull-down-refresh",
},
{
name: "创建动画",
url: "animation",
},
// #ifndef QUICKAPP-WEBVIEW-UNION
{
name: "创建绘画",
url: "canvas",
},
// #endif
// #ifndef MP-LARK
{
name: "节点信息",
url: "get-node-info",
},
// #endif
{
name: "节点布局交互状态",
url: "intersection-observer",
},
{
name: "显示操作菜单",
url: "action-sheet",
},
{
name: "显示模态弹窗",
url: "modal",
},
{
name: "显示加载提示框",
url: "show-loading",
},
{
name: "显示消息提示框",
url: "toast",
},
] as Page[],
},
{
id: "device",
name: "设备",
open: false,
pages: [
{
name: "获取设备网络状态",
url: "get-network-type",
},
{
name: "获取设备系统信息",
url: "get-system-info",
},
{
name: "打电话",
url: "make-phone-call",
},
//#ifndef H5
{
name: "震动",
url: "vibrate",
},
{
name: "添加手机联系人",
url: "add-phone-contact",
},
{
name: "扫码",
url: "scan-code",
},
//#endif
//#ifndef H5 || MP-JD
{
name: "剪贴板",
url: "clipboard",
},
//#endif
// #ifndef H5 || MP-ALIPAY
{
name: "屏幕亮度",
url: "brightness",
},
// #endif
// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || MP-JD
{
name: "蓝牙",
url: "bluetooth",
},
// #endif
// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ
{
name: "生物认证",
url: "soter",
},
// #endif
// #ifdef APP-PLUS || MP-WEIXIN
{
name: "iBeacon",
url: "ibeacon",
},
// #endif
// #ifndef H5
{
name: "监听加速度传感器",
url: "on-accelerometer-change",
},
// #endif
// #ifndef H5 || MP-JD
{
name: "监听罗盘数据",
url: "on-compass-change",
},
// #endif
//#ifdef APP-PLUS
{
name: "监听距离传感器",
url: "/platforms/app-plus/proximity/proximity",
},
{
name: "监听方向传感器",
url: "/platforms/app-plus/orientation/orientation",
},
//#endif
] as Page[],
},
{
id: "network",
name: "网络",
open: false,
pages: [
{
name: "发起一个请求",
url: "request",
},
{
name: "上传文件",
url: "upload-file",
},
{
name: "下载文件",
url: "download-file",
},
] as Page[],
},
{
id: "websocket",
name: "websocket",
open: false,
pages: [
// #ifndef MP-ALIPAY
{
name: "socketTask",
url: "websocket-socketTask",
},
// #endif
{
name: "全局websocket",
url: "websocket-global",
},
] as Page[],
},
{
id: "media",
name: "媒体",
open: false,
pages: [
{
name: "图片",
url: "image",
},
// #ifndef MP-LARK
{
name: "音频",
url: "inner-audio",
},
// #endif
// #ifdef APP-PLUS || MP-WEIXIN || MP-BAIDU || MP-QQ|| MP-JD
{
name: "录音",
url: "voice",
},
{
name: "背景音频",
url: "background-audio",
},
// #endif
// #ifndef MP-ALIPAY
{
name: "视频",
url: "video",
},
// #endif
// #ifndef H5
{
name: "文件",
url: "file",
},
// #endif
// #ifndef H5 || MP-ALIPAY
{
name: "保存媒体到本地",
url: "save-media",
},
// #endif
] as Page[],
},
// #ifndef MP-KUAISHOU
{
id: "location",
name: "位置",
open: false,
pages: [
{
name: "获取当前位置",
url: "get-location",
},
{
name: "使用地图查看位置",
url: "open-location",
},
// #ifndef MP-TOUTIAO
{
name: "使用地图选择位置",
url: "choose-location",
},
// #endif
// #ifndef MP-QQ || MP-TOUTIAO || MP-LARK
{
name: "地图控制",
url: "map",
},
// #endif
// #ifdef APP-PLUS
{
name: "地图搜索",
url: "map-search",
},
// #endif
] as Page[],
},
// #endif
{
id: "storage",
name: "数据",
open: false,
pages: [
{
name: "数据存储(key-value)",
url: "storage",
},
// #ifdef APP-PLUS
{
name: "SQLite",
url: "sqlite",
},
// #endif
] as Page[],
},
// #ifdef APP-PLUS || MP-WEIXIN
{
id: "rewarded-video-ad",
url: "rewarded-video-ad",
name: "激励视频广告",
open: false,
enable: false,
pages: [] as Page[]
},
// #endif
// #ifdef APP-PLUS
{
id: "full-screen-video-ad",
url: "full-screen-video-ad",
name: "全屏视频广告",
open: false,
enable: false,
pages: [] as Page[]
},
// #endif
// #ifndef H5 || QUICKAPP-WEBVIEW || MP-KUAISHOU || MP-LARK
{
id: "login",
name: "登录",
open: false,
pages: [
{
name: "登录",
url: "login",
},
{
name: "获取用户信息",
url: "get-user-info",
},
] as Page[],
},
// #endif
// #ifndef H5 || QUICKAPP-WEBVIEW-UNION
{
id: "share",
name: "分享",
open: false,
pages: [
{
name: "分享",
url: "share",
},
] as Page[],
},
// #endif
// #ifdef APP-PLUS || MP-WEIXIN
{
id: "payment",
name: "支付",
open: false,
pages: [
{
name: "发起支付",
url: "request-payment",
},
] as Page[],
},
// #endif
// #ifdef APP-PLUS
{
id: "speech",
name: "语音",
open: false,
pages: [
{
name: "语音识别",
url: "/platforms/app-plus/speech/speech",
},
] as Page[],
},
{
id: "push",
name: "推送",
open: false,
pages: [
{
name: "推送",
url: "/platforms/app-plus/push/push",
},
] as Page[],
},
//#endif
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) {
const page : Page = {
name: item.name,
enable: item.enable,
url: item.url!
}
this.goDetailPage(page);
return;
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.enable != true) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
uni.navigateTo({
url
})
}
}
}
</script>
<style>
@import '../../../common/uni-uvue.css';
</style>
\ No newline at end of file
<template>
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/componentIndex.png"></image>
</view>
<view class="uni-hello-text">
<text class="hello-text">uni-app内置组件,展示样式仅供参考,文档详见:</text>
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
:inWhiteList="true"></u-link>
</view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
type Page = {
name : string,
enable ?: boolean,
url ?: string
}
type ListItem = {
id : string,
name : string,
open : boolean,
pages : Page[],
url ?: string,
enable ?: boolean
}
export default {
data() {
return {
list: [{
id: 'view',
name: '视图容器',
open: false,
pages: [
{
name: 'view',
enable: true
},
{
name: 'scroll-view',
enable: true
},
{
name: 'swiper',
enable: false
},
// #ifndef MP-TOUTIAO || MP-LARK
{
name: 'movable-view',
enable: false
},
{
name: 'cover-view',
enable: false
},
// #endif
] as Page[]
}, {
id: 'content',
name: '基础内容',
open: false,
pages: [
{
name: 'text',
enable: false
},
{
name: 'rich-text',
enable: false
},
{
name: 'progress',
enable: true
}
] as Page[]
}, {
id: 'form',
name: '表单组件',
open: false,
pages: [
{
name: 'button',
enable: true
},
{
name: 'checkbox',
enable: true
},
{
name: 'form',
enable: false
},
{
name: 'input',
enable: true
}, {
name: 'label',
enable: false
}, {
name: 'picker',
enable: false
}, {
name: 'picker-view',
enable: false
}, {
name: 'radio',
enable: true
}, {
name: 'slider',
enable: false
}, {
name: 'switch',
enable: false
}, {
name: 'textarea',
enable: true
},
// #ifdef APP-PLUS || MP-WEIXIN || H5 || MP-BAIDU
{
name: 'editor',
enable: false
},
// #endif
] as Page[]
}, {
id: 'nav',
name: '导航',
open: false,
pages: [{
name: 'navigator',
enable: false
}] as Page[]
}, {
id: 'media',
name: '媒体组件',
open: false,
pages: [{
name: 'image',
enable: true
}, {
name: 'video',
enable: false
}] as Page[]
},
// #ifndef MP-TOUTIAO || MP-KUAISHOU
{
id: 'map',
name: '地图',
open: false,
pages: [
{
name: 'map',
enable: false
}
] as Page[]
},
// #endif
// #ifndef QUICKAPP-WEBVIEW-UNION
{
id: 'canvas',
name: '画布',
open: false,
pages: [
{
name: 'canvas'
}
] as Page[]
},
// #endif
// #ifdef APP-PLUS || H5
{
id: 'web-view',
name: '网页',
open: false,
pages: [
{
name: '网络网页',
enable: false,
url: '/pages/component/web-view/web-view'
},
{
name: '本地网页',
enable: false,
url: '/pages/component/web-view-local/web-view-local'
}
] as Page[]
},
// #endif
// #ifndef H5 || MP-BAIDU || QUICKAPP-WEBVIEW || MP-LARK || MP-JD
{
id: 'ad',
url: 'ad',
name: 'AD组件',
enable: false,
open: false,
pages: [] as Page[]
}
// #endif
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) {
const page : Page = {
name: item.name,
enable: item.enable,
url: item.url
}
this.goDetailPage(page);
return;
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.enable != true) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
uni.navigateTo({
url
})
}
}
}
</script>
<style>
@import '../../../common/uni-uvue.css';
</style>
\ No newline at end of file
export type State = {
colorIndex: number,
currentColor: string
}
const colorList: string[] = ['#FF0000', '#00FF00', '#0000FF']
export const state = reactive({
colorIndex: 0,
currentColor: colorList[0]
} as State)
export const setColorIndex = (index: number) => {
state.colorIndex = index
state.currentColor = colorList[index]
}
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
因为 它太大了无法显示 source diff 。你可以改为 查看blob
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
/*GenAppStyles*/
export const GenAppStyles = [new Map<string, Map<string, Map<string, any>>>([["uni-padding-wrap", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "30rpx"], ["paddingBottom", 0], ["paddingLeft", "30rpx"]])]])], ["uni-title", new Map<string, any>([["", new Map<string, any>([["paddingTop", "20rpx"], ["paddingRight", 0], ["paddingBottom", "20rpx"], ["paddingLeft", 0]])]])], ["uni-title-text", new Map<string, any>([["", new Map<string, any>([["fontSize", "30rpx"], ["fontWeight", "500"]])]])], ["uni-subtitle-text", new Map<string, any>([["", new Map<string, any>([["marginTop", "10rpx"], ["fontSize", "24rpx"], ["color", "#888888"]])]])], ["uni-common-mb", new Map<string, any>([["", new Map<string, any>([["marginBottom", "30rpx"]])]])], ["uni-common-pb", new Map<string, any>([["", new Map<string, any>([["paddingBottom", "30rpx"]])]])], ["uni-common-pl", new Map<string, any>([["", new Map<string, any>([["paddingLeft", "30rpx"]])]])], ["uni-common-mt", new Map<string, any>([["", new Map<string, any>([["marginTop", "30rpx"]])]])], ["uni-hello-text", new Map<string, any>([["", new Map<string, any>([["color", "#7A7E83"]])]])], ["uni-list", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#FFFFFF"], ["position", "relative"], ["display", "flex"], ["flexDirection", "column"]])]])], ["uni-list-cell", new Map<string, any>([["", new Map<string, any>([["position", "relative"], ["display", "flex"], ["flexDirection", "row"], ["justifyContent", "space-between"], ["alignItems", "center"]])]])], ["uni-list-cell-hover", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#eeeeee"]])]])], ["uni-list-cell-pd", new Map<string, any>([["", new Map<string, any>([["paddingTop", "22rpx"], ["paddingRight", "30rpx"], ["paddingBottom", "22rpx"], ["paddingLeft", "30rpx"]])]])], ["uni-list-cell-left", new Map<string, any>([["", new Map<string, any>([["fontSize", "28rpx"], ["paddingTop", 0], ["paddingRight", "30rpx"], ["paddingBottom", 0], ["paddingLeft", "30rpx"]])]])], ["uni-list-cell-db", new Map<string, any>([["", new Map<string, any>([["flex", "1"]])]])], ["uni-list-cell-right", new Map<string, any>([["", new Map<string, any>([["flex", "1"]])]])], ["uni-label", new Map<string, any>([["", new Map<string, any>([["width", "210rpx"]])]])], ["uni-input", new Map<string, any>([["", new Map<string, any>([["height", "50rpx"], ["paddingTop", "15rpx"], ["paddingRight", "25rpx"], ["paddingBottom", "15rpx"], ["paddingLeft", "25rpx"], ["lineHeight", "50rpx"], ["fontSize", "28rpx"], ["backgroundColor", "#FFFFFF"], ["flex", "1"]])]])], ["uni-flex", new Map<string, any>([["", new Map<string, any>([["display", "flex"], ["flexDirection", "row"]])]])], ["uni-flex-item", new Map<string, any>([["", new Map<string, any>([["flex", "1"]])]])], ["uni-row", new Map<string, any>([["", new Map<string, any>([["flexDirection", "row"]])]])], ["uni-column", new Map<string, any>([["", new Map<string, any>([["flexDirection", "column"]])]])], ["uni-bg-red", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#F76260"], ["color", "#FFFFFF"]])]])], ["uni-bg-green", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#09BB07"], ["color", "#FFFFFF"]])]])], ["uni-bg-blue", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#007AFF"], ["color", "#FFFFFF"]])]])], ["uni-btn-v", new Map<string, any>([["", new Map<string, any>([["paddingTop", "10rpx"], ["paddingRight", 0], ["paddingBottom", "10rpx"], ["paddingLeft", 0]])]])], ["uni-btn", new Map<string, any>([["", new Map<string, any>([["marginTop", "20rpx"]])]])], ["uni-link", new Map<string, any>([["", new Map<string, any>([["color", "#576B95"], ["fontSize", "26rpx"]])]])], ["uni-center", new Map<string, any>([["", new Map<string, any>([["flexDirection", "row"], ["justifyContent", "center"]])]])], ["uni-textarea-box", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#ffffff"]])]])], ["uni-textarea", new Map<string, any>([["", new Map<string, any>([["paddingTop", "18rpx"], ["paddingRight", "18rpx"], ["paddingBottom", "18rpx"], ["paddingLeft", "18rpx"], ["lineHeight", 1.6], ["fontSize", "28rpx"]])]])], ["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["text", new Map<string, any>([["", new Map<string, any>([["color", "#7A7E83"], ["fontSize", 14], ["lineHeight", 20]])]])]])]
\ No newline at end of file
export default {
name: "page-head",
props: {
title: {
type: String,
default: ""
}
}
}
const GenComponentsPageHeadPageHeadStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenComponentsPageHeadPageHeadRender(_ctx: GenComponentsPageHeadPageHead): VNode | null {
return createElementVNode("view", new Map<string, any | null>([["class", "common-page-head"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "common-page-head-title-box"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "common-page-head-title"]]), toDisplayString(_ctx.title), 1 /* TEXT */)
])
])
}
\ No newline at end of file
/**
* @description u-link是一个外部网页超链接组件,在小程序内打开内部web-view组件或复制url,在app内打开外部浏览器,在h5端打开新网页
* @property {String} href 点击后打开的外部网页url,小程序中必须以https://开头
* @property {String} text 显示的文字
* @property {Boolean} inWhiteList 是否在小程序白名单中,如果在的话,在小程序端会直接打开内置web-view,否则会只会复制url,提示在外部打开
* @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
*/
export default {
name: 'u-link',
props: {
href: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
inWhiteList: {
type: Boolean,
default: false
}
},
methods: {
openURL() {
//
// plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
//
//
//
}
}
}
const GenComponentsULinkULinkStyles = [new Map<string, Map<string, Map<string, any>>>([["text", new Map<string, any>([["", new Map<string, any>([["color", "#7A7E83"], ["fontSize", 14], ["lineHeight", 20]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenComponentsULinkULinkRender(_ctx: GenComponentsULinkULink): VNode | null {
return createElementVNode("view", new Map<string, any | null>([["class", "uni-row"]]), [
createElementVNode("text", new Map<string, any | null>([
["class", "text"],
["href", _ctx.href],
["onClick", _ctx.openURL],
["inWhiteList", _ctx.inWhiteList]
]), toDisplayString(_ctx.text), 9 /* TEXT, PROPS */, ["href", "onClick", "inWhiteList"])
])
}
\ No newline at end of file
import App from './App'
import PageHead from './components/page-head/page-head'
import ULink from './components/u-link/u-link'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.component('page-head', PageHead)
app.component('u-link', ULink)
return {
app
}
}
export function main(app: IApp) {
defineAppConfig();
definePageRoutes();
(createApp()['app'] as VueApp).mount(app);
}
import "io.dcloud.uniapp.appframe.AppConfig"
export class UniAppConfig extends AppConfig {
override name: string = "hello-uniapp x"
override appid: string = "__UNI__4517034"
override versionName: string = "1.0.0"
override versionCode: string = "100"
constructor() {}
}
export * from './App.vue.style.uts'
import GenPagesTabBarComponentComponentClass from './pages/tabBar/component/component.uvue?type=page'
import GenPagesComponentViewViewClass from './pages/component/view/view.uvue?type=page'
import GenPagesComponentScrollViewScrollViewClass from './pages/component/scroll-view/scroll-view.uvue?type=page'
import GenPagesComponentTextTextClass from './pages/component/text/text.uvue?type=page'
import GenPagesComponentProgressProgressClass from './pages/component/progress/progress.uvue?type=page'
import GenPagesComponentButtonButtonClass from './pages/component/button/button.uvue?type=page'
import GenPagesComponentRadioRadioClass from './pages/component/radio/radio.uvue?type=page'
import GenPagesComponentCheckboxCheckboxClass from './pages/component/checkbox/checkbox.uvue?type=page'
import GenPagesComponentInputInputClass from './pages/component/input/input.uvue?type=page'
import GenPagesComponentTextareaTextareaClass from './pages/component/textarea/textarea.uvue?type=page'
import GenPagesComponentImageImageClass from './pages/component/image/image.uvue?type=page'
import GenPagesTabBarAPIAPIClass from './pages/tabBar/API/API.uvue?type=page'
import GenPagesAPINavigatorNavigatorClass from './pages/API/navigator/navigator.uvue?type=page'
import GenPagesAPINavigatorNewPageNewUvuePage1Class from './pages/API/navigator/new-page/new-uvue-page-1.uvue?type=page'
import GenPagesAPINavigatorNewPageNewUvuePage2Class from './pages/API/navigator/new-page/new-uvue-page-2.uvue?type=page'
function definePageRoutes() {
__uniRoutes.push({ path: "pages/tabBar/component/component", component: GenPagesTabBarComponentComponentClass, meta: { isQuit: true } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","内置组件"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/view/view", component: GenPagesComponentViewViewClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","view"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/scroll-view/scroll-view", component: GenPagesComponentScrollViewScrollViewClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","scroll-view"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/text/text", component: GenPagesComponentTextTextClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","text"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/progress/progress", component: GenPagesComponentProgressProgressClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","progress"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/button/button", component: GenPagesComponentButtonButtonClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","button"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/radio/radio", component: GenPagesComponentRadioRadioClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","radio"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/checkbox/checkbox", component: GenPagesComponentCheckboxCheckboxClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","checkbox"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/input/input", component: GenPagesComponentInputInputClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","input"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/textarea/textarea", component: GenPagesComponentTextareaTextareaClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","textarea"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/component/image/image", component: GenPagesComponentImageImageClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","image"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/tabBar/API/API", component: GenPagesTabBarAPIAPIClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","接口"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/API/navigator/navigator", component: GenPagesAPINavigatorNavigatorClass, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","页面跳转"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/API/navigator/new-page/new-uvue-page-1", component: GenPagesAPINavigatorNewPageNewUvuePage1Class, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","新UVUE页面1"]]) } as PageRoute)
__uniRoutes.push({ path: "pages/API/navigator/new-page/new-uvue-page-2", component: GenPagesAPINavigatorNewPageNewUvuePage2Class, meta: { isQuit: false } as PageMeta, style: new Map<string, any>([["navigationBarTitleText","新UVUE页面2"]]) } as PageRoute)
}
function defineAppConfig(){
__uniConfig.entryPagePath = '/pages/tabBar/component/component'
__uniConfig.globalStyle = new Map<string, any>([["navigationBarTextStyle","black"],["navigationBarTitleText","uni-app"],["navigationBarBackgroundColor","#F8F8F8"],["backgroundColor","#F8F8F8"]])
__uniConfig.tabBar = null
}
'use strict';
require('vue');
const main = 'main.uts';
module.exports = main;
const preloadPageUrl = '/pages/extUI/calendar/calendar'
export default {
data() {
return {
title: 'navigate'
}
},
methods: {
navigateTo() {
uni.navigateTo({
url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
})
},
navigateBack() {
uni.navigateBack({
delta: 1
});
},
redirectTo() {
uni.redirectTo({
url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
});
},
switchTab() {
uni.switchTab({
url: '/pages/tabBar/template/template'
});
},
reLaunch() {
// if (this.hasLeftWin) {
// uni.reLaunch({
// url: '/pages/component/view/view'
// });
// return;
// }
uni.reLaunch({
url: '/pages/tabBar/component/component'
});
},
customAnimation() {
uni.navigateTo({
url: '/pages/API/navigator/new-page/new-uvue-page-1?data=使用自定义动画打开页面',
animationType: 'slide-in-bottom',
animationDuration: 200
})
},
preloadPage() {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
// uni.preloadPage({
// url: preloadPageUrl,
// success(){
// uni.showToast({
// title:'页面预载成功'
// })
// },
// fail(){
// uni.showToast({
// title:'页面预载失败'
// })
// }
// })
},
unPreloadPage() {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
// uni.unPreloadPage({
// url: preloadPageUrl
// })
},
navigateToPreloadPage() {
uni.navigateTo({
url: preloadPageUrl
})
}
}
}
const GenPagesAPINavigatorNavigatorStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesAPINavigatorNavigatorRender(_ctx: GenPagesAPINavigatorNavigator): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_button = resolveComponent("button")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-btn-v"]]), [
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.navigateTo],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["跳转新页面,并传递数据"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.navigateBack],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["返回上一页"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.redirectTo],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["在当前页面打开"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createCommentVNode(" <button @tap=\"switchTab\" class=\"uni-btn\">切换到模板选项卡</button> "),
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.reLaunch],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["关闭所有页面,打开首页"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.customAnimation],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["使用自定义动画打开页面"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.preloadPage],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["预载复杂页面"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["onClick", _ctx.unPreloadPage],
["class", "uni-btn"]
]), new Map<string, any | null>([
["default", ((): any[] => ["取消页面预载"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createCommentVNode(" <button @tap=\"navigateToPreloadPage\" class=\"uni-btn\">打开复杂页面</button> ")
])
])
])
}
\ No newline at end of file
import { State, state, setColorIndex } from '@/store/index.uts'
export default {
data() {
return {
data: '',
stateData: state as State
}
},
methods: {
changeColor() {
setColorIndex(state.colorIndex > 1 ? 0 : state.colorIndex + 1)
},
navToUvue() {
uni.navigateTo({
url: 'pages/API/navigator/new-page/new-uvue-page-2'
})
},
navToVue() {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
// uni.navigateTo({
// url:'new-vue-page-2'
// })
}
},
onLoad(e: Map<string, string>) {
// TODO 类型后续会做调整
this.data = e['data']!
}
}
const GenPagesAPINavigatorNewPageNewUvuePage1Styles = [new Map<string, Map<string, Map<string, any>>>([["new-page__text", new Map<string, any>([["", new Map<string, any>([["fontSize", 14], ["color", "#666666"]])]])], ["root", new Map<string, any>([["", new Map<string, any>([["flexDirection", "column"]])]])], ["page-body", new Map<string, any>([["", new Map<string, any>([["flex", "1"], ["flexDirection", "column"], ["justifyContent", "flex-start"], ["alignItems", "center"], ["paddingTop", 50]])]])], ["new-page__text-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 20], ["paddingRight", 20], ["paddingBottom", 20], ["paddingLeft", 20]])]])], ["new-page__color", new Map<string, any>([["", new Map<string, any>([["width", 200], ["height", 100], ["justifyContent", "center"], ["alignItems", "center"]])]])], ["new-page__color-text", new Map<string, any>([["", new Map<string, any>([["fontSize", 14], ["color", "#FFFFFF"], ["lineHeight", 30], ["textAlign", "center"]])]])], ["new-page__button-item", new Map<string, any>([["", new Map<string, any>([["marginTop", 15], ["width", 300]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesAPINavigatorNewPageNewUvuePage1Render(_ctx: GenPagesAPINavigatorNewPageNewUvuePage1): VNode | null {
const _component_button = resolveComponent("button")
return createElementVNode("view", new Map<string, any | null>([["class", "root"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "page-body"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "new-page__text-box"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "new-page__text"]]), "从上个页面接收到参数:" + toDisplayString(_ctx.data), 1 /* TEXT */)
]),
createElementVNode("view", new Map<string, any | null>([
["class", "new-page__color"],
["onClick", _ctx.changeColor],
["style", normalizeStyle({backgroundColor:_ctx.stateData.currentColor})]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "new-page__color-text"]]), "点击改变颜色")
], 12 /* STYLE, PROPS */, ["onClick"]),
createElementVNode("view", new Map<string, any | null>([["class", "new-page__text-box"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "new-page__text"]]), "点击上方色块在页面之间进行通讯")
]),
createElementVNode("view", new Map<string, any | null>([["class", "new-page__button"]]), [
createVNode(_component_button, new Map<string, any | null>([
["class", "new-page__button-item"],
["onClick", _ctx.navToUvue]
]), new Map<string, any | null>([
["default", ((): any[] => ["跳转UVUE页面"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["class", "new-page__button-item"],
["onClick", _ctx.navToVue]
]), new Map<string, any | null>([
["default", ((): any[] => ["跳转VUE页面"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"])
])
])
])
}
\ No newline at end of file
import {
State,
state,
setColorIndex
} from '@/store/index.uts'
export default {
data() {
return {
data: '',
stateData: state as State
}
},
methods: {
setColor() {
setColorIndex(state.colorIndex > 1 ? 0 : state.colorIndex + 1)
}
}
}
const GenPagesAPINavigatorNewPageNewUvuePage2Styles = [new Map<string, Map<string, Map<string, any>>>([["new-page__text", new Map<string, any>([["", new Map<string, any>([["fontSize", 14], ["color", "#666666"]])]])], ["root", new Map<string, any>([["", new Map<string, any>([["flexDirection", "column"]])]])], ["page-body", new Map<string, any>([["", new Map<string, any>([["flex", "1"], ["flexDirection", "column"], ["justifyContent", "flex-start"], ["alignItems", "center"], ["paddingTop", 50]])]])], ["new-page__text-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 20], ["paddingRight", 20], ["paddingBottom", 20], ["paddingLeft", 20]])]])], ["new-page__color", new Map<string, any>([["", new Map<string, any>([["width", 200], ["height", 100], ["justifyContent", "center"], ["alignItems", "center"]])]])], ["new-page__color-text", new Map<string, any>([["", new Map<string, any>([["fontSize", 14], ["color", "#FFFFFF"], ["lineHeight", 30], ["textAlign", "center"]])]])], ["new-page__button-item", new Map<string, any>([["", new Map<string, any>([["marginTop", 15], ["width", 300]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesAPINavigatorNewPageNewUvuePage2Render(_ctx: GenPagesAPINavigatorNewPageNewUvuePage2): VNode | null {
return createElementVNode("view", new Map<string, any | null>([["class", "root"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "page-body"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "new-page__text-box"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "new-page__text"]]), "新UVUE页面2")
]),
createElementVNode("view", new Map<string, any | null>([
["class", "new-page__color"],
["onClick", _ctx.setColor],
["style", normalizeStyle({backgroundColor: _ctx.stateData.currentColor})]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "new-page__color-text"]]), "点击改变颜色")
], 12 /* STYLE, PROPS */, ["onClick"]),
createElementVNode("view", new Map<string, any | null>([["class", "new-page__text-box"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "new-page__text"]]), "点击上方色块在页面之间进行通讯")
])
])
])
}
\ No newline at end of file
export default {
data() {
return {
title: 'button',
loading: false,
_timer: 0
}
},
onShow() {
// this.clearTimer();
// this._timer = setTimeout(() => {
// // this.loading = true;
// }, 300)
},
onUnload() {
// this.clearTimer();
// this.loading = false;
},
methods: {
// clearTimer() {
// if (this._timer != 0) {
// clearTimeout(this._timer);
// }
// }
},
}
const GenPagesComponentButtonButtonStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["button", new Map<string, any>([["", new Map<string, any>([["marginTop", "30rpx"]])]])], ["button-sp-area", new Map<string, any>([["", new Map<string, any>([["marginTop", 0], ["marginRight", "auto"], ["marginBottom", 0], ["marginLeft", "auto"], ["width", "60%"]])]])], ["mini-btn", new Map<string, any>([["", new Map<string, any>([["marginRight", "10rpx"], ["marginBottom", "30rpx"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentButtonButtonRender(_ctx: GenPagesComponentButtonButton): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_button = resolveComponent("button")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createVNode(_component_button, new Map<string, any | null>([["type", "primary"]]), new Map<string, any | null>([
["default", ((): any[] => ["页面主操作 Normal"])],
["_", 1 /* STABLE */]
])),
createCommentVNode(" <button type=\"primary\" :loading=\"loading\" class=\"button\">页面主操作 Loading</button> "),
createVNode(_component_button, new Map<string, any | null>([
["type", "primary"],
["disabled", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["页面主操作 Disabled"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "default"],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["页面次要操作 Normal"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "default"],
["disabled", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["页面次要操作 Disabled"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "warn"],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["警告类操作 Normal"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "warn"],
["disabled", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["警告类操作 Disabled"])],
["_", 1 /* STABLE */]
])),
createElementVNode("view", new Map<string, any | null>([["class", "button-sp-area"]]), [
createVNode(_component_button, new Map<string, any | null>([
["type", "primary"],
["plain", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["按钮"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "primary"],
["disabled", true],
["plain", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => [" 不可点击的按钮 "])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "default"],
["plain", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["按钮"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["type", "default"],
["disabled", true],
["plain", true],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["按钮"])],
["_", 1 /* STABLE */]
])),
createElementVNode("view", new Map<string, any | null>([["class", "uni-flex uni-row"]]), [
createVNode(_component_button, new Map<string, any | null>([
["class", "button mini-btn"],
["type", "primary"],
["size", "mini"]
]), new Map<string, any | null>([
["default", ((): any[] => ["按钮"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["class", "button mini-btn"],
["type", "default"],
["size", "mini"]
]), new Map<string, any | null>([
["default", ((): any[] => ["按钮"])],
["_", 1 /* STABLE */]
])),
createVNode(_component_button, new Map<string, any | null>([
["class", "button mini-btn"],
["type", "warn"],
["size", "mini"]
]), new Map<string, any | null>([
["default", ((): any[] => ["按钮"])],
["_", 1 /* STABLE */]
]))
])
])
])
])
}
\ No newline at end of file
type ItemType = {
value : string,
name : string,
checked : boolean
}
export default {
data() {
return {
title: 'checkbox 复选框',
items: [{
value: 'USA',
name: '美国',
checked: false
},
{
value: 'CHN',
name: '中国',
checked: true
},
{
value: 'BRA',
name: '巴西',
checked: false
},
{
value: 'JPN',
name: '日本',
checked: false
},
{
value: 'ENG',
name: '英国',
checked: false
},
{
value: 'FRA',
name: '法国',
checked: false
}
] as ItemType[]
}
},
methods: {
checkboxChange: function (value : string[]) {
// TODO 后续更改参数
var items = this.items,
values = value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
const item = items[i]
if (values.indexOf(item.value) >= 0) {
item.checked = true
} else {
item.checked = false
}
}
}
}
}
const GenPagesComponentCheckboxCheckboxStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["uni-list-cell", new Map<string, any>([["", new Map<string, any>([["justifyContent", "flex-start"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentCheckboxCheckboxRender(_ctx: GenPagesComponentCheckboxCheckbox): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_checkbox = resolveComponent("checkbox")
const _component_checkbox_group = resolveComponent("checkbox-group")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 默认样式 ")
]),
createElementVNode("view", null, [
createVNode(_component_checkbox_group, new Map<string, any | null>([["class", "uni-flex uni-row"]]), new Map<string, any | null>([
["default", ((): any[] => [
createVNode(_component_checkbox, new Map<string, any | null>([
["value", "cb1"],
["checked", true],
["style", "margin-right: 30rpx;"]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "选中")
])],
["_", 1 /* STABLE */]
])),
createVNode(_component_checkbox, new Map<string, any | null>([["value", "cb"]]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "未选中")
])],
["_", 1 /* STABLE */]
]))
])],
["_", 1 /* STABLE */]
]))
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 不同颜色和尺寸的checkbox ")
]),
createElementVNode("view", null, [
createVNode(_component_checkbox_group, new Map<string, any | null>([["class", "uni-flex uni-row"]]), new Map<string, any | null>([
["default", ((): any[] => [
createVNode(_component_checkbox, new Map<string, any | null>([
["value", "cb1"],
["checked", true],
["color", "#FFCC33"],
["style", "transform:scale(0.7); margin-right: 30rpx;"]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "选中 ")
])],
["_", 1 /* STABLE */]
])),
createVNode(_component_checkbox, new Map<string, any | null>([
["value", "cb"],
["color", "#FFCC33"],
["style", "transform:scale(0.7)"]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "未选中")
])],
["_", 1 /* STABLE */]
]))
])],
["_", 1 /* STABLE */]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 推荐展示样式 "),
createElementVNode("text", new Map<string, any | null>([["class", "uni-subtitle-text"]]), " 使用 uni-list 布局 ")
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-list"]]), [
createVNode(_component_checkbox_group, new Map<string, any | null>([["onChange", _ctx.checkboxChange]]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode(Fragment, null, RenderHelpers.renderList(_ctx.items, (item, _, _):VNode => {
return createElementVNode("view", new Map<string, any | null>([
["class", "uni-list-cell uni-list-cell-pd"],
["key", item.value]
]), [
createElementVNode("view", null, [
createVNode(_component_checkbox, new Map<string, any | null>([
["value", item.value],
["checked", item.checked]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, toDisplayString(item.name), 1 /* TEXT */)
])],
["_", 2 /* DYNAMIC */]
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "checked"])
])
])
}), 128 /* KEYED_FRAGMENT */)
])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onChange"])
])
])
}
\ No newline at end of file
export default {
data() {
return {
title: 'image'
}
}
}
const GenPagesComponentImageImageStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["image", new Map<string, any>([["", new Map<string, any>([["marginTop", "40rpx"], ["marginRight", "auto"], ["marginBottom", "40rpx"], ["marginLeft", "auto"], ["width", "200rpx"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentImageImageRender(_ctx: GenPagesComponentImageImage): VNode | null {
const _component_page_head = resolveComponent("page-head")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 示例1 "),
createElementVNode("text", new Map<string, any | null>([["class", "uni-subtitle-text"]]), " 本地图片 ")
]),
createElementVNode("view", new Map<string, any | null>([
["class", "uni-center"],
["style", "background:#FFFFFF; font-size:0;"]
]), [
createElementVNode("image", new Map<string, any | null>([
["class", "image"],
["mode", "widthFix"],
["src", "/static/uni.png"]
]))
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 示例2 "),
createElementVNode("text", new Map<string, any | null>([["class", "uni-subtitle-text"]]), " 网络图片 ")
]),
createElementVNode("view", new Map<string, any | null>([
["class", "uni-center"],
["style", "background:#FFFFFF; font-size:0;"]
]), [
createElementVNode("image", new Map<string, any | null>([
["class", "image"],
["mode", "widthFix"],
["src", "https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"]
]))
])
])
])
}
\ No newline at end of file
export default {
data() {
return {
title: 'input',
focus: false,
inputValue: '',
showClearIcon: false,
inputClearValue: '',
changeValue: '',
showPassword: true
}
},
methods: {
onKeyInput: function (event : InputEvent) {
this.inputValue = event.detail.value
},
replaceInput: function (event : InputEvent) {
var value = event.detail.value;
if (value == '11') {
this.changeValue = '2';
}
},
clearInput: function(event: InputEvent) {
this.inputClearValue = event.detail.value;
if (event.detail.value.length > 0) {
this.showClearIcon = true;
} else {
this.showClearIcon = false;
}
},
clearIcon: function() {
this.inputClearValue = '';
this.showClearIcon = false;
},
changePassword: function() {
this.showPassword = !this.showPassword;
},
// hideKeyboard: function(event: InputEvent) {
// if (event.detail.value === '123') {
// uni.hideKeyboard();
// }
// },
// onFocus() {
// this.$mp.page.$getAppWebview().setStyle({
// softinputNavBar: 'none'
// })
// },
// onBlur() {
// this.$mp.page.$getAppWebview().setStyle({
// softinputNavBar: 'auto'
// })
// }
}
}
const GenPagesComponentInputInputStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["nvue-page-root", new Map<string, any>([["", new Map<string, any>([["backgroundColor", "#F8F8F8"], ["paddingBottom", 20]])]])], ["title", new Map<string, any>([["", new Map<string, any>([["paddingTop", 5], ["paddingRight", 13], ["paddingBottom", 5], ["paddingLeft", 13]])]])], ["uni-form-item__title", new Map<string, any>([["", new Map<string, any>([["fontSize", 16], ["lineHeight", 24]])]])], ["uni-input-wrapper", new Map<string, any>([["", new Map<string, any>([["display", "flex"], ["paddingTop", 8], ["paddingRight", 13], ["paddingBottom", 8], ["paddingLeft", 13], ["flexDirection", "row"], ["flexWrap", "nowrap"], ["backgroundColor", "#FFFFFF"]])]])], ["uni-input", new Map<string, any>([["", new Map<string, any>([["height", 28], ["lineHeight", 28], ["fontSize", 15], ["paddingTop", 0], ["paddingRight", 0], ["paddingBottom", 0], ["paddingLeft", 0], ["flex", "1"], ["backgroundColor", "#FFFFFF"]])]])], ["uni-icon", new Map<string, any>([["", new Map<string, any>([["width", 24], ["height", 24]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentInputInputRender(_ctx: GenPagesComponentInputInput): VNode | null {
const _component_page_head = resolveComponent("page-head")
return createElementVNode("view", new Map<string, any | null>([["class", "nvue-page-root"]]), [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-common-mt"]]), [
createCommentVNode(" <view class=\"uni-form-item uni-column\">\n <view class=\"title\"><text class=\"uni-form-item__title\">可自动聚焦的 input</text></view>\n <view class=\"uni-input-wrapper\">\n <input class=\"uni-input\" :focus=\"true\" placeholder=\"自动获得焦点\" ref=\"input\"/>\n </view>\n </view> "),
createCommentVNode(" <view v-if=\"platform==='ios'&&!isNvue\" class=\"uni-form-item uni-column\">\n <view class=\"title\"><text class=\"uni-form-item__title\">隐藏 iOS 软键盘上的导航条</text></view>\n <view class=\"uni-input-wrapper\">\n <input class=\"uni-input\" placeholder=\"触摸其他地方收起键盘\" @focus=\"onFocus\" @blur=\"onBlur\" />\n </view>\n </view> "),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "键盘右下角按钮显示为搜索")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["confirmType", "search"],
["placeholder", "键盘右下角按钮显示为搜索"]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "键盘右下角按钮显示为发送")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["confirmType", "send"],
["placeholder", "键盘右下角按钮显示为发送"]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "控制最大输入长度的 input")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["maxlength", 10],
["placeholder", "最大输入长度为10"]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "实时获取输入值:" + toDisplayString(_ctx.inputValue), 1 /* TEXT */)
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["onInput", _ctx.onKeyInput],
["placeholder", "输入同步到view中"]
]), null, 40 /* PROPS, HYDRATE_EVENTS */, ["onInput"])
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "控制输入的 input")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["onInput", _ctx.replaceInput],
["value", _ctx.changeValue],
["placeholder", "连续的两个1会变成2"]
]), null, 40 /* PROPS, HYDRATE_EVENTS */, ["onInput", "value"])
])
]),
createCommentVNode(" <view class=\"uni-form-item uni-column\">\n <view class=\"title\"><text class=\"uni-form-item__title\">控制键盘的 input</text></view>\n <view class=\"uni-input-wrapper\">\n <input class=\"uni-input\" ref=\"input1\" @input=\"hideKeyboard\" placeholder=\"输入123自动收起键盘\" />\n </view>\n </view> "),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "数字输入的 input")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["type", "number"],
["placeholder", "这是一个数字输入框"]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "密码输入的 input")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["password", true],
["type", "text"],
["placeholder", "这是一个密码输入框"]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "带小数点的 input")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["type", "digit"],
["placeholder", "带小数点的数字键盘"]
]))
])
]),
createCommentVNode(" <view class=\"uni-form-item uni-column\">\n <view class=\"title\"><text class=\"uni-form-item__title\">身份证输入的 input</text></view>\n <view class=\"uni-input-wrapper\">\n <input class=\"uni-input\" type=\"idcard\" placeholder=\"身份证输入键盘\" /> </view>\n </view> "),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "控制占位符颜色的 input")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["placeholder-style", "color:#F76260"],
["placeholder", "占位符字体是红色的"]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "带清除按钮的输入框")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["placeholder", "带清除按钮的输入框"],
["value", _ctx.inputClearValue],
["onInput", _ctx.clearInput]
]), null, 40 /* PROPS, HYDRATE_EVENTS */, ["value", "onInput"]),
isTrue(_ctx.showClearIcon)
? createElementVNode("image", new Map<string, any | null>([
["key", 0],
["class", "uni-icon"],
["src", "/static/icons/clear.png"],
["onClick", _ctx.clearIcon]
]), null, 8 /* PROPS */, ["onClick"])
: createCommentVNode("v-if", true)
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-form-item uni-column"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "title"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-form-item__title"]]), "可查看密码的输入框")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-input-wrapper"]]), [
createElementVNode("input", new Map<string, any | null>([
["class", "uni-input"],
["placeholder", "请输入密码"],
["password", _ctx.showPassword]
]), null, 8 /* PROPS */, ["password"]),
createElementVNode("image", new Map<string, any | null>([
["class", "uni-icon"],
["src", !_ctx.showPassword ? '/static/icons/eye-active.png': '/static/icons/eye.png'],
["onClick", _ctx.changePassword]
]), null, 8 /* PROPS */, ["src", "onClick"])
])
])
])
])
}
\ No newline at end of file
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[]
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
}
}
}
const GenPagesComponentProgressProgressStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["progress-box", new Map<string, any>([["", new Map<string, any>([["height", "50rpx"], ["marginBottom", "60rpx"]])]])], ["progress-cancel", new Map<string, any>([["", new Map<string, any>([["marginLeft", "40rpx"]])]])], ["button", new Map<string, any>([["", new Map<string, any>([["marginTop", "20rpx"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentProgressProgressRender(_ctx: GenPagesComponentProgressProgress): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_progress = resolveComponent("progress")
const _component_button = resolveComponent("button")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "progress-box"]]), [
createVNode(_component_progress, new Map<string, any | null>([
["percent", _ctx.pgList[0]],
["show-info", true],
["stroke-width", 3]
]), null, 8 /* PROPS */, ["percent"])
]),
createElementVNode("view", new Map<string, any | null>([["class", "progress-box"]]), [
createVNode(_component_progress, new Map<string, any | null>([
["percent", _ctx.pgList[1]],
["stroke-width", 3]
]), null, 8 /* PROPS */, ["percent"])
]),
createElementVNode("view", new Map<string, any | null>([["class", "progress-box"]]), [
createVNode(_component_progress, new Map<string, any | null>([
["percent", _ctx.pgList[2]],
["stroke-width", 3]
]), null, 8 /* PROPS */, ["percent"])
]),
createElementVNode("view", new Map<string, any | null>([["class", "progress-box"]]), [
createVNode(_component_progress, new Map<string, any | null>([
["percent", _ctx.pgList[3]],
["activeColor", "#10AEFF"],
["stroke-width", 3]
]), null, 8 /* PROPS */, ["percent"])
]),
createElementVNode("view", new Map<string, any | null>([["class", "progress-control"]]), [
createVNode(_component_button, new Map<string, any | null>([
["type", "primary"],
["onClick", _ctx.setProgress],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["设置进度"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["type", "warn"],
["onClick", _ctx.clearProgress],
["class", "button"]
]), new Map<string, any | null>([
["default", ((): any[] => ["清除进度"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onClick"])
])
])
])
}
\ No newline at end of file
type ItemType = {
value : string,
name : string,
}
export default {
data() {
return {
title: 'radio 单选框',
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
},
] as ItemType[],
current: 0
}
},
methods: {
radioChange(e : string) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e) {
this.current = i;
break;
}
}
}
}
}
const GenPagesComponentRadioRadioStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["uni-list-cell", new Map<string, any>([["", new Map<string, any>([["justifyContent", "flex-start"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentRadioRadioRender(_ctx: GenPagesComponentRadioRadio): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_radio = resolveComponent("radio")
const _component_radio_group = resolveComponent("radio-group")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 默认样式 ")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-flex uni-row"]]), [
createVNode(_component_radio, new Map<string, any | null>([
["value", "r1"],
["checked", true],
["style", "margin-right: 30rpx;"]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "选中")
])],
["_", 1 /* STABLE */]
])),
createVNode(_component_radio, new Map<string, any | null>([["value", "r2"]]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "未选中")
])],
["_", 1 /* STABLE */]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 不同颜色和尺寸的radio ")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-flex uni-row"]]), [
createVNode(_component_radio, new Map<string, any | null>([
["value", "r1"],
["checked", true],
["color", "#FFCC33"],
["style", "transform:scale(0.7); margin-right: 30rpx;"]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "选中 ")
])],
["_", 1 /* STABLE */]
])),
createVNode(_component_radio, new Map<string, any | null>([
["value", "r2"],
["color", "#FFCC33"],
["style", "transform:scale(0.7)"]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, "未选中")
])],
["_", 1 /* STABLE */]
]))
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 推荐展示样式 ")
])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-list"]]), [
createVNode(_component_radio_group, new Map<string, any | null>([["onChange", _ctx.radioChange]]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode(Fragment, null, RenderHelpers.renderList(_ctx.items, (item, index, _):VNode => {
return createElementVNode("view", new Map<string, any | null>([
["class", "uni-list-cell uni-list-cell-pd"],
["key", item.value]
]), [
createElementVNode("view", null, [
createVNode(_component_radio, new Map<string, any | null>([
["value", item.value],
["checked", index === _ctx.current]
]), new Map<string, any | null>([
["default", ((): any[] => [
createElementVNode("text", null, toDisplayString(item.name), 1 /* TEXT */)
])],
["_", 2 /* DYNAMIC */]
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "checked"])
])
])
}), 128 /* KEYED_FRAGMENT */)
])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["onChange"])
])
])
}
\ No newline at end of file
export default {
data() {
return {
scrollTop: 0,
oldScrollTop: 0
}
},
methods: {
upper: function (e : ScrollToUpperEvent) {
console.log(e)
},
lower: function (e : ScrollToLowerEvent) {
console.log(e)
},
scroll: function (e : ScrollEvent) {
this.oldScrollTop = e.detail.scrollTop
},
goTop: function () {
// 解决view层不同步的问题
this.scrollTop = this.oldScrollTop
this.$nextTick(function () {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
const GenPagesComponentScrollViewScrollViewStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["scroll-Y", new Map<string, any>([["", new Map<string, any>([["height", "300rpx"]])]])], ["scroll-view_H", new Map<string, any>([["", new Map<string, any>([["width", "100%"], ["flexDirection", "row"]])]])], ["scroll-view-item", new Map<string, any>([["", new Map<string, any>([["height", "300rpx"], ["justifyContent", "center"], ["alignItems", "center"]])]])], ["scroll-view-item_H", new Map<string, any>([["", new Map<string, any>([["width", "690rpx"], ["height", "300rpx"], ["justifyContent", "center"], ["alignItems", "center"]])]])], ["text", new Map<string, any>([["", new Map<string, any>([["fontSize", "36rpx"], ["color", "#ffffff"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentScrollViewScrollViewRender(_ctx: GenPagesComponentScrollViewScrollView): VNode | null {
const _component_page_head = resolveComponent("page-head")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", "scroll-view,区域滚动视图"]])),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), "Vertical Scroll"),
createElementVNode("text", new Map<string, any | null>([["class", "uni-subtitle-text"]]), "纵向滚动")
]),
createElementVNode("view", null, [
createElementVNode("scroll-view", new Map<string, any | null>([
["scrollTop", _ctx.scrollTop],
["scrollY", true],
["class", "scroll-Y"],
["onScrolltoupper", _ctx.upper],
["onScrolltolower", _ctx.lower],
["onScroll", _ctx.scroll]
]), [
createElementVNode("view", new Map<string, any | null>([
["id", "demo1"],
["class", "scroll-view-item uni-bg-red"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), "A")
]),
createElementVNode("view", new Map<string, any | null>([
["id", "demo2"],
["class", "scroll-view-item uni-bg-green"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), "B")
]),
createElementVNode("view", new Map<string, any | null>([
["id", "demo3"],
["class", "scroll-view-item uni-bg-blue"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), "C")
])
], 40 /* PROPS, HYDRATE_EVENTS */, ["scrollTop", "onScrolltoupper", "onScrolltolower", "onScroll"])
]),
createElementVNode("view", new Map<string, any | null>([
["onClick", _ctx.goTop],
["class", "uni-center uni-common-mt"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-link"]]), "点击这里返回顶部")
], 8 /* PROPS */, ["onClick"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), "Horizontal Scroll"),
createElementVNode("text", new Map<string, any | null>([["class", "uni-subtitle-text"]]), "横向滚动")
]),
createElementVNode("view", null, [
createElementVNode("scroll-view", new Map<string, any | null>([
["class", "scroll-view_H"],
["scrollX", true],
["onScroll", _ctx.scroll],
["scrollLeft", 120]
]), [
createElementVNode("view", new Map<string, any | null>([
["id", "demo1"],
["class", "scroll-view-item_H uni-bg-red"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), "A")
]),
createElementVNode("view", new Map<string, any | null>([
["id", "demo2"],
["class", "scroll-view-item_H uni-bg-green"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), "B")
]),
createElementVNode("view", new Map<string, any | null>([
["id", "demo3"],
["class", "scroll-view-item_H uni-bg-blue"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), "C")
])
], 40 /* PROPS, HYDRATE_EVENTS */, ["onScroll"])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-common-pb"]]))
])
])
}
\ No newline at end of file
export default {
data() {
return {
title: 'text',
texts: [
'HBuilder,400万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'HBuilder,400万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'......'
] as string[],
text: '',
canAdd: true,
canRemove: false,
extraLine: [] as string[]
}
},
methods: {
add: function () {
this.extraLine.push(this.texts[this.extraLine.length % 12]);
this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0;
},
remove: function () {
if (this.extraLine.length > 0) {
this.extraLine.pop();
this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0;
}
}
}
}
const GenPagesComponentTextTextStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["text-box", new Map<string, any>([["", new Map<string, any>([["marginBottom", "40rpx"], ["paddingTop", "40rpx"], ["paddingRight", 0], ["paddingBottom", "40rpx"], ["paddingLeft", 0], ["display", "flex"], ["height", "300rpx"], ["backgroundColor", "#FFFFFF"], ["justifyContent", "center"], ["alignItems", "center"], ["textAlign", "center"]])]])], ["text", new Map<string, any>([["", new Map<string, any>([["fontSize", "30rpx"], ["color", "#353535"], ["lineHeight", "54rpx"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentTextTextRender(_ctx: GenPagesComponentTextText): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_button = resolveComponent("button")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
createElementVNode("view", new Map<string, any | null>([
["class", "text-box"],
["scroll-y", "true"]
]), [
createElementVNode("text", new Map<string, any | null>([["class", "text"]]), toDisplayString(_ctx.text), 1 /* TEXT */)
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-btn-v"]]), [
createVNode(_component_button, new Map<string, any | null>([
["class", "uni-btn"],
["type", "primary"],
["disabled", !_ctx.canAdd],
["onClick", _ctx.add]
]), new Map<string, any | null>([
["default", ((): any[] => ["add line"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["disabled", "onClick"]),
createVNode(_component_button, new Map<string, any | null>([
["class", "uni-btn"],
["type", "warn"],
["disabled", !_ctx.canRemove],
["onClick", _ctx.remove]
]), new Map<string, any | null>([
["default", ((): any[] => ["remove line"])],
["_", 1 /* STABLE */]
]), 8 /* PROPS */, ["disabled", "onClick"])
])
])
])
}
\ No newline at end of file
export default {
data() {
return {
title: 'textarea',
focus: false
}
},
methods: {
bindTextAreaBlur: function (e : TextareaBlurEvent) {
console.log(e.detail.value)
}
}
}
const GenPagesComponentTextareaTextareaStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentTextareaTextareaRender(_ctx: GenPagesComponentTextareaTextarea): VNode | null {
const _component_page_head = resolveComponent("page-head")
return createElementVNode("view", null, [
createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-pl"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 输入区域高度自适应,不会出现滚动条 ")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-textarea-box"]]), [
createElementVNode("textarea", new Map<string, any | null>([
["onBlur", _ctx.bindTextAreaBlur],
["auto-height", true],
["class", "uni-textarea"]
]), null, 40 /* PROPS, HYDRATE_EVENTS */, ["onBlur"])
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-pl"]]), [
createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 占位符字体是红色的textarea ")
]),
createElementVNode("view", new Map<string, any | null>([["class", "uni-textarea-box"]]), [
createElementVNode("textarea", new Map<string, any | null>([
["placeholder-style", "color:#F76260"],
["placeholder", "占位符字体是红色的"],
["class", "uni-textarea"]
]))
])
])
}
\ No newline at end of file
此差异已折叠。
此差异已折叠。
export type State = {
colorIndex: number,
currentColor: string
}
const colorList: string[] = ['#FF0000', '#00FF00', '#0000FF']
export const state = reactive({
colorIndex: 0,
currentColor: colorList[0]
} as State)
export const setColorIndex = (index: number) => {
state.colorIndex = index
state.currentColor = colorList[index]
}
此差异已折叠。
{
"id": "__UNI__4517034",
"name": "hello-uniapp x",
"description": "",
"version": {
"name": "1.0.0",
"code": "100"
},
"uni-app-x": {},
"app": {}
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册