Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 1f8e77ee 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

revert(component): multiple root node

上级 660d69e0
隐藏空白更改
内联 并排
Showing with 1085 addition and 651 deletion
pages/component/button/button.uvue
浏览文件 @ 1f8e77ee
<script>
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
data() {
return {
plain_boolean: false,
disabled_boolean: false,
default_style: false,
size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[],
size_enum_current: 0,
type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
type_enum_current: 0,
count: 0,
text: 'uni-app-x'
}
},
methods: {
button_click() {
console.log("组件被点击时触发")
this.count++
},
button_touchstart() { console.log("手指触摸动作开始") },
button_touchmove() { console.log("手指触摸后移动") },
button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
button_touchend() { console.log("手指触摸动作结束") },
button_tap() { console.log("手指触摸后马上离开") },
button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
change_default_style(checked : boolean) { this.default_style = checked },
radio_change_size_enum(checked : number) { this.size_enum_current = checked },
radio_change_type_enum(checked : number) { this.type_enum_current = checked }
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
data() {
return {
plain_boolean: false,
disabled_boolean: false,
default_style: false,
size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[],
size_enum_current: 0,
type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
type_enum_current: 0,
count: 0,
text: 'uni-app-x'
}
},
methods: {
button_click() {
console.log("组件被点击时触发")
this.count++
},
button_touchstart() { console.log("手指触摸动作开始") },
button_touchmove() { console.log("手指触摸后移动") },
button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
button_touchend() { console.log("手指触摸动作结束") },
button_tap() { console.log("手指触摸后马上离开") },
button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
change_default_style(checked : boolean) { this.default_style = checked },
radio_change_size_enum(checked : number) { this.size_enum_current = checked },
radio_change_type_enum(checked : number) { this.type_enum_current = checked }
}
}
</script>
<template>
<view class="main">
<button
:disabled="disabled_boolean"
:size="size_enum[size_enum_current].name"
:type="type_enum[type_enum_current].name"
:plain="plain_boolean"
@click="button_click"
@touchstart="button_touchstart"
@touchmove="button_touchmove"
@touchcancel="button_touchcancel"
@touchend="button_touchend"
@tap="button_tap"
@longpress="button_longpress"
class="btn"
:style="
default_style
? 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;'
: ''
"
:hover-class="default_style ? 'is-hover' : 'button-hover'"
>
{{ text }}
</button>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="main">
<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
:style="default_style ? 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;': ''"
:hover-class="default_style ? 'is-hover': 'button-hover'">{{text}}</button>
</view>
<view class="content">
<boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="修改默认样式和点击效果(高优先)" @change="change_default_style"></boolean-data>
<enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
<enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
<boolean-data
:defaultValue="false"
title="按钮是否镂空，背景色透明"
@change="change_plain_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否禁用"
@change="change_disabled_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="修改默认样式和点击效果(高优先)"
@change="change_default_style"
></boolean-data>
<enum-data
:items="size_enum"
title="按钮的大小"
@change="radio_change_size_enum"
></enum-data>
<enum-data
:items="type_enum"
title="按钮的类型"
@change="radio_change_type_enum"
></enum-data>
</view>
<!-- #ifdef APP -->
</scroll-view>
......@@ -60,23 +96,23 @@
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
border-color: #179b16;
}
</style>
\ No newline at end of file
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
border-color: #179b16;
}
</style>
pages/component/checkbox/checkbox.uvue
浏览文件 @ 1f8e77ee
<script>
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff"
}
},
methods: {
checkboxChange: function (e : CheckboxGroupChangeEvent) {
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : CheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff"
}
},
methods: {
checkboxChange: function (e : CheckboxGroupChangeEvent) {
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : CheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="main">
<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="checkbox_click" @touchstart="checkbox_touchstart"
@touchmove="checkbox_touchmove" @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend"
@tap="checkbox_tap" @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
</view>
<view class="main">
<checkbox
:disabled="disabled_boolean"
:checked="checked_boolean"
:color="color_input"
:backgroundColor="backgroundColor_input"
:borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input"
:activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input"
@click="checkbox_click"
@touchstart="checkbox_touchstart"
@touchmove="checkbox_touchmove"
@touchcancel="checkbox_touchcancel"
@touchend="checkbox_touchend"
@tap="checkbox_tap"
@longpress="checkbox_longpress"
><text>uni-app-x</text></checkbox
>
</view>
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#007aff" title="checkbox的图标颜色，优先级大于color属性" type="text"
@confirm="confirm_iconColor_input"></input-data>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data
:defaultValue="false"
title="当前是否选中，可用来设置默认选中"
@change="change_checked_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否禁用"
@change="change_disabled_boolean"
></boolean-data>
<input-data
defaultValue="#007aff"
title="checkbox的颜色"
type="text"
@confirm="confirm_color_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="checkbox默认的背景颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<input-data
defaultValue="#d1d1d1"
title="checkbox默认的边框颜色"
type="text"
@confirm="confirm_borderColor_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="checkbox选中时的背景颜色"
type="text"
@confirm="confirm_activeBackgroundColor_input"
></input-data>
<input-data
defaultValue="#d1d1d1"
title="checkbox选中时的边框颜色"
type="text"
@confirm="confirm_activeBorderColor_input"
></input-data>
<input-data
defaultValue="#007aff"
title="checkbox的图标颜色，优先级大于color属性"
type="text"
@confirm="confirm_iconColor_input"
></input-data>
</view>
<view>
<page-head 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-group" @change="testChange" style="flex-wrap: wrap">
<checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx" class="checkbox cb">选中
</checkbox>
<checkbox value="cb1" style="margin-right: 30rpx" class="checkbox cb1">{{ text }}</checkbox>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
<checkbox value="cb3" style="margin-top: 20rpx" class="checkbox cb3">
{{ wrapText }}
</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-group">
<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
class="checkbox">选中
</checkbox>
<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
</checkbox-group>
</view>
</view>
<view>
<page-head 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-group"
@change="testChange"
style="flex-wrap: wrap"
>
<checkbox
value="cb"
:checked="checked"
:color="color"
style="margin-right: 30rpx"
class="checkbox cb"
>选中
</checkbox>
<checkbox
value="cb1"
style="margin-right: 30rpx"
class="checkbox cb1"
>{{ text }}</checkbox
>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
>禁用</checkbox
>
<checkbox
value="cb3"
style="margin-top: 20rpx"
class="checkbox cb3"
>
{{ wrapText }}
</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-group">
<checkbox
value="cb1"
:checked="true"
color="#FFCC33"
style="transform: scale(0.7); margin-right: 30rpx"
class="checkbox"
>选中
</checkbox>
<checkbox
value="cb"
color="#FFCC33"
style="transform: scale(0.7)"
class="checkbox"
>未选中</checkbox
>
</checkbox-group>
</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 uni-common-pl">
<checkbox-group @change="checkboxChange" class="checkbox-group">
<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
:value="item.value" :checked="item.checked" :class="index < items.length - 1 ? 'uni-list-cell-line' : ''">
{{ item.name }}
</checkbox>
</checkbox-group>
</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 uni-common-pl">
<checkbox-group @change="checkboxChange" class="checkbox-group">
<checkbox
class="uni-list-cell uni-list-cell-pd checkbox"
v-for="(item, index) in items"
:key="item.value"
:value="item.value"
:checked="item.checked"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
>
{{ item.name }}
</checkbox>
</checkbox-group>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
\ No newline at end of file
.uni-list-cell {
justify-content: flex-start;
}
</style>
pages/component/progress/progress.uvue
浏览文件 @ 1f8e77ee
<script>
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[],
curPercent: 0,
showInfo: true,
borderRadius: 0,
fontSize: 16,
strokeWidth: 3,
backgroundColor: '#EBEBEB',
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[],
curPercent: 0,
showInfo: true,
borderRadius: 0,
fontSize: 16,
strokeWidth: 3,
backgroundColor: '#EBEBEB',
// 组件属性 autotest
active_boolean: false,
show_info_boolean: false,
duration_input: 30,
percent_input: 0,
stroke_width_input: 6,
activeColor_input: "#09BB07",
backgroundColor_input: "#EBEBEB",
active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
active_mode_enum_current: 0
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
},
activeend(e : ProgressActiveendEvent) {
this.curPercent = e.detail.curPercent
},
progress_touchstart() { console.log("手指触摸动作开始") },
progress_touchmove() { console.log("手指触摸后移动") },
progress_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
progress_touchend() { console.log("手指触摸动作结束") },
progress_tap() { console.log("手指触摸后马上离开") },
change_active_boolean(checked : boolean) { this.active_boolean = checked },
change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },
confirm_duration_input(value : number) { this.duration_input = value },
confirm_percent_input(value : number) { this.percent_input = value },
confirm_stroke_width_input(value : number) { this.stroke_width_input = value },
confirm_activeColor_input(value : string) { this.activeColor_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
// 组件属性 autotest
active_boolean: false,
show_info_boolean: false,
duration_input: 30,
percent_input: 0,
stroke_width_input: 6,
activeColor_input: "#09BB07",
backgroundColor_input: "#EBEBEB",
active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
active_mode_enum_current: 0
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
},
activeend(e : ProgressActiveendEvent) {
this.curPercent = e.detail.curPercent
},
progress_touchstart() { console.log("手指触摸动作开始") },
progress_touchmove() { console.log("手指触摸后移动") },
progress_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
progress_touchend() { console.log("手指触摸动作结束") },
progress_tap() { console.log("手指触摸后马上离开") },
change_active_boolean(checked : boolean) { this.active_boolean = checked },
change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },
confirm_duration_input(value : number) { this.duration_input = value },
confirm_percent_input(value : number) { this.percent_input = value },
confirm_stroke_width_input(value : number) { this.stroke_width_input = value },
confirm_activeColor_input(value : string) { this.activeColor_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
}
}
</script>
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="main">
<progress :duration="duration_input" :percent="percent_input" :show-info="show_info_boolean"
:stroke-width="stroke_width_input" :activeColor="activeColor_input" :backgroundColor="backgroundColor_input"
:active="active_boolean" :active-mode="active_mode_enum[active_mode_enum_current].name"
@touchstart="progress_touchstart" @touchmove="progress_touchmove" @touchcancel="progress_touchcancel"
@touchend="progress_touchend" @tap="progress_tap" style="width:80%;"><text>uni-app-x</text></progress>
</view>
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="进度条从左往右的动画" @change="change_active_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
<input-data defaultValue="30" title="进度增加1%所需毫秒数" type="number" @confirm="confirm_duration_input"></input-data>
<input-data defaultValue="0" title="百分比0~100" type="number" @confirm="confirm_percent_input"></input-data>
<input-data defaultValue="6" title="进度条线的宽度，单位px" type="number"
@confirm="confirm_stroke_width_input"></input-data>
<input-data defaultValue="#09BB07" title="已选择的进度条的颜色" type="text"
@confirm="confirm_activeColor_input"></input-data>
<input-data defaultValue="#EBEBEB" title="未选择的进度条的颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<enum-data :items="active_mode_enum" title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
@change="radio_change_active_mode_enum"></enum-data>
</view>
<view class="main">
<progress
:duration="duration_input"
:percent="percent_input"
:show-info="show_info_boolean"
:stroke-width="stroke_width_input"
:activeColor="activeColor_input"
:backgroundColor="backgroundColor_input"
:active="active_boolean"
:active-mode="active_mode_enum[active_mode_enum_current].name"
@touchstart="progress_touchstart"
@touchmove="progress_touchmove"
@touchcancel="progress_touchcancel"
@touchend="progress_touchend"
@tap="progress_tap"
style="width: 80%"
>
<text>uni-app-x</text>
</progress>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data
:defaultValue="false"
title="进度条从左往右的动画"
@change="change_active_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="在进度条右侧显示百分比"
@change="change_show_info_boolean"
></boolean-data>
<input-data
defaultValue="30"
title="进度增加1%所需毫秒数"
type="number"
@confirm="confirm_duration_input"
></input-data>
<input-data
defaultValue="0"
title="百分比0~100"
type="number"
@confirm="confirm_percent_input"
></input-data>
<input-data
defaultValue="6"
title="进度条线的宽度，单位px"
type="number"
@confirm="confirm_stroke_width_input"
></input-data>
<input-data
defaultValue="#09BB07"
title="已选择的进度条的颜色"
type="text"
@confirm="confirm_activeColor_input"
></input-data>
<input-data
defaultValue="#EBEBEB"
title="未选择的进度条的颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<enum-data
:items="active_mode_enum"
title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
@change="radio_change_active_mode_enum"
></enum-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress :percent="pgList[0]" :active="true" :border-radius="borderRadius" :show-info="showInfo"
:font-size="fontSize" :stroke-width="strokeWidth" :background-color="backgroundColor" class="progress p"
@activeend="activeend" />
</view>
<view class="progress-box">
<progress :percent="pgList[1]" :stroke-width="3" class="progress p1" />
</view>
<view class="progress-box">
<progress :percent="pgList[2]" :stroke-width="3" class="progress p2" />
</view>
<view class="progress-box">
<progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
</view>
<view class="progress-control">
<button type="primary" @click="setProgress" class="button">设置进度</button>
<button type="warn" @click="clearProgress" class="button">清除进度</button>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress
:percent="pgList[0]"
:active="true"
:border-radius="borderRadius"
:show-info="showInfo"
:font-size="fontSize"
:stroke-width="strokeWidth"
:background-color="backgroundColor"
class="progress p"
@activeend="activeend"
/>
</view>
<view class="progress-box">
<progress
:percent="pgList[1]"
:stroke-width="3"
class="progress p1"
/>
</view>
<view class="progress-box">
<progress
:percent="pgList[2]"
:stroke-width="3"
class="progress p2"
/>
</view>
<view class="progress-box">
<progress
:percent="pgList[3]"
activeColor="#10AEFF"
:stroke-width="3"
class="progress p3"
/>
</view>
<view class="progress-control">
<button type="primary" @click="setProgress" class="button">
设置进度
</button>
<button type="warn" @click="clearProgress" class="button">
清除进度
</button>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.progress-box {
height: 50rpx;
margin-bottom: 60rpx;
}
.progress-box {
height: 50rpx;
margin-bottom: 60rpx;
}
.progress-cancel {
margin-left: 40rpx;
}
.progress-cancel {
margin-left: 40rpx;
}
.button {
margin-top: 20rpx;
}
</style>
\ No newline at end of file
.button {
margin-top: 20rpx;
}
</style>
pages/component/radio/radio.uvue
浏览文件 @ 1f8e77ee
<script>
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : RadioGroupChangeEvent) {
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : RadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : RadioGroupChangeEvent) {
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : RadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="main">
<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
<text>uni-app-x</text>
</radio>
</view>
<view class="main">
<radio
:disabled="disabled_boolean"
:checked="checked_boolean"
:color="color_input"
:backgroundColor="backgroundColor_input"
:borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input"
:activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input"
@click="radio_click"
@touchstart="radio_touchstart"
@touchmove="radio_touchmove"
@touchcancel="radio_touchcancel"
@touchend="radio_touchend"
@tap="radio_tap"
@longpress="radio_longpress"
>
<text>uni-app-x</text>
</radio>
</view>
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data
:defaultValue="false"
title="<radio/> 当前是否选中"
@change="change_checked_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否禁用"
@change="change_disabled_boolean"
></boolean-data>
<input-data
defaultValue="#007AFF"
title="radio的颜色"
type="text"
@confirm="confirm_color_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="radio默认的背景颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<input-data
defaultValue="#d1d1d1"
title="radio默认的边框颜色"
type="text"
@confirm="confirm_borderColor_input"
></input-data>
<input-data
defaultValue="#007AFF"
title="radio选中时的背景颜色，优先级大于color属性"
type="text"
@confirm="confirm_activeBackgroundColor_input"
></input-data>
<input-data
defaultValue=""
title="radio选中时的边框颜色"
type="text"
@confirm="confirm_activeBorderColor_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="radio的图标颜色"
type="text"
@confirm="confirm_iconColor_input"
></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
<radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx" class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 30rpx" class="radio r1">{{
text
}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 20rpx">{{
wrapText
}}</radio>
</radio-group>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group
class="uni-flex uni-row radio-group"
@change="testChange"
style="flex-wrap: wrap"
>
<radio
value="r"
:checked="checked"
:color="color"
style="margin-right: 30rpx"
class="radio r"
>选中
</radio>
<radio value="r1" style="margin-right: 30rpx" class="radio r1">{{
text
}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 20rpx">{{
wrapText
}}</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
class="radio">选中
</radio>
<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio
value="r1"
:checked="true"
color="#FFCC33"
style="transform: scale(0.7); margin-right: 30rpx"
class="radio"
>选中
</radio>
<radio
value="r2"
color="#FFCC33"
style="transform: scale(0.7)"
class="radio"
>未选中</radio
>
</radio-group>
</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 uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
:checked="index === current">
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio
class="uni-list-cell uni-list-cell-pd radio"
v-for="(item, index) in items"
:key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
:value="item.value"
:checked="index === current"
>
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
\ No newline at end of file
.uni-list-cell {
justify-content: flex-start;
}
</style>
pages/component/slider/slider.uvue
浏览文件 @ 1f8e77ee
<script>
export default {
data() {
return {
sliderValue: 50,
sliderBlockSize: 20,
sliderBackgroundColor: '#000000',
sliderActiveColor: '#FFCC33',
sliderBlockColor: '#8A6DE9',
// 组件属性 autotest
show_value_boolean: false,
disabled_boolean: false,
min_input: 0,
max_input: 100,
step_input: 1,
value_input: 0,
activeColor_input: "#007aff",
backgroundColor_input: "#e9e9e9",
block_size_input: 28,
block_color_input: "#ffffff"
}
},
methods: {
sliderChange(e : SliderChangeEvent) {
console.log('value 发生变化：' + e.detail.value)
},
slider_click() { console.log("组件被点击时触发") },
slider_touchstart() { console.log("手指触摸动作开始") },
slider_touchmove() { console.log("手指触摸后移动") },
slider_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
slider_touchend() { console.log("手指触摸动作结束") },
slider_tap() { console.log("手指触摸后马上离开") },
slider_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
slider_change() { console.log("完成一次拖动后触发的事件，event.detail = {value: value}") },
slider_changing() { console.log("拖动过程中触发的事件，event.detail = {value: value}") },
change_show_value_boolean(checked : boolean) { this.show_value_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_min_input(value : number) { this.min_input = value },
confirm_max_input(value : number) { this.max_input = value },
confirm_step_input(value : number) { this.step_input = value },
confirm_value_input(value : number) { this.value_input = value },
confirm_activeColor_input(value : string) { this.activeColor_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_block_size_input(value : number) { this.block_size_input = value },
confirm_block_color_input(value : string) { this.block_color_input = value }
}
}
export default {
data() {
return {
sliderValue: 50,
sliderBlockSize: 20,
sliderBackgroundColor: "#000000",
sliderActiveColor: "#FFCC33",
sliderBlockColor: "#8A6DE9",
// 组件属性 autotest
show_value_boolean: false,
disabled_boolean: false,
min_input: 0,
max_input: 100,
step_input: 1,
value_input: 0,
activeColor_input: "#007aff",
backgroundColor_input: "#e9e9e9",
block_size_input: 28,
block_color_input: "#ffffff",
};
},
methods: {
sliderChange(e: SliderChangeEvent) {
console.log("value 发生变化：" + e.detail.value);
},
slider_click() {
console.log("组件被点击时触发");
},
slider_touchstart() {
console.log("手指触摸动作开始");
},
slider_touchmove() {
console.log("手指触摸后移动");
},
slider_touchcancel() {
console.log("手指触摸动作被打断，如来电提醒，弹窗");
},
slider_touchend() {
console.log("手指触摸动作结束");
},
slider_tap() {
console.log("手指触摸后马上离开");
},
slider_longpress() {
console.log(
"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
);
},
slider_change() {
console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
},
slider_changing() {
console.log("拖动过程中触发的事件，event.detail = {value: value}");
},
change_show_value_boolean(checked: boolean) {
this.show_value_boolean = checked;
},
change_disabled_boolean(checked: boolean) {
this.disabled_boolean = checked;
},
confirm_min_input(value: number) {
this.min_input = value;
},
confirm_max_input(value: number) {
this.max_input = value;
},
confirm_step_input(value: number) {
this.step_input = value;
},
confirm_value_input(value: number) {
this.value_input = value;
},
confirm_activeColor_input(value: string) {
this.activeColor_input = value;
},
confirm_backgroundColor_input(value: string) {
this.backgroundColor_input = value;
},
confirm_block_size_input(value: number) {
this.block_size_input = value;
},
confirm_block_color_input(value: string) {
this.block_color_input = value;
},
},
};
</script>
<template>
<view class="main">
<slider
:disabled="disabled_boolean"
:min="min_input"
:max="max_input"
:step="step_input"
:value="value_input"
:activeColor="activeColor_input"
:backgroundColor="backgroundColor_input"
:block-size="block_size_input"
:block-color="block_color_input"
:show-value="show_value_boolean"
@click="slider_click"
@touchstart="slider_touchstart"
@touchmove="slider_touchmove"
@touchcancel="slider_touchcancel"
@touchend="slider_touchend"
@tap="slider_tap"
@longpress="slider_longpress"
@change="slider_change"
@changing="slider_changing"
style="width: 90%"
><text>uni-app-x</text></slider
>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="main">
<slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
:activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
:block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
@touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
@touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
@changing="slider_changing" style="width: 90%;"><text>uni-app-x</text></slider>
</view>
<view class="content nvue">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="0" title="slider 最小值" type="number" @confirm="confirm_min_input"></input-data>
<input-data defaultValue="100" title="slider 最大值" type="number" @confirm="confirm_max_input"></input-data>
<input-data defaultValue="1" title="slider 步长，取值必须大于 0，并且可被(max - min)整除" type="number"
@confirm="confirm_step_input"></input-data>
<input-data defaultValue="0" title="radio当前取值" type="number" @confirm="confirm_value_input"></input-data>
<input-data defaultValue="#007aff" title="slider 滑块左侧已选择部分的线条颜色" type="text"
@confirm="confirm_activeColor_input"></input-data>
<input-data defaultValue="#e9e9e9" title="radio背景条的颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="28" title="radio滑块的大小，取值范围为 12 - 28" type="number"
@confirm="confirm_block_size_input"></input-data>
<input-data defaultValue="#ffffff" title="滑块颜色" type="text" @confirm="confirm_block_color_input"></input-data>
<boolean-data
:defaultValue="false"
title="是否显示当前 value"
@change="change_show_value_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否禁用"
@change="change_disabled_boolean"
></boolean-data>
<input-data
defaultValue="0"
title="slider 最小值"
type="number"
@confirm="confirm_min_input"
></input-data>
<input-data
defaultValue="100"
title="slider 最大值"
type="number"
@confirm="confirm_max_input"
></input-data>
<input-data
defaultValue="1"
title="slider 步长，取值必须大于 0，并且可被(max - min)整除"
type="number"
@confirm="confirm_step_input"
></input-data>
<input-data
defaultValue="0"
title="radio当前取值"
type="number"
@confirm="confirm_value_input"
></input-data>
<input-data
defaultValue="#007aff"
title="slider 滑块左侧已选择部分的线条颜色"
type="text"
@confirm="confirm_activeColor_input"
></input-data>
<input-data
defaultValue="#e9e9e9"
title="radio背景条的颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<input-data
defaultValue="28"
title="radio滑块的大小，取值范围为 12 - 28"
type="number"
@confirm="confirm_block_size_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="滑块颜色"
type="text"
@confirm="confirm_block_color_input"
></input-data>
</view>
<view class="uni-padding-wrap">
......@@ -96,14 +197,26 @@
<view class="uni-title">设置最小/最大值</view>
<view>
<slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
<slider
@change="sliderChange"
:value="100"
:min="50"
:max="200"
:show-value="true"
/>
</view>
<view class="uni-title">不同颜色和大小的滑块</view>
<view>
<slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
:backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
:block-size="sliderBlockSize" />
<slider
class="slider-custom-color-and-size"
@change="sliderChange"
:value="sliderValue"
:backgroundColor="sliderBackgroundColor"
:activeColor="sliderActiveColor"
:blockColor="sliderBlockColor"
:block-size="sliderBlockSize"
/>
</view>
</view>
<!-- #ifdef APP -->
......@@ -112,21 +225,21 @@
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.m-l-a {
margin-left: auto;
}
</style>
\ No newline at end of file
.m-l-a {
margin-left: auto;
}
</style>
pages/component/textarea/textarea.uvue
浏览文件 @ 1f8e77ee
......@@ -44,42 +44,102 @@ export default {
</script>
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="main">
<textarea class="uni-textarea" :auto-focus="auto_focus_boolean" :focus="focus_boolean" :confirm-type="confirm_type_enum[confirm_type_enum_current].name" :confirm-hold="confirm_hold_boolean" :auto-height="auto_height_boolean" :fixed="fixed_boolean" :show-confirm-bar="show_confirm_bar_boolean" :adjust-position="adjust_position_boolean" :inputmode="inputmode_enum[inputmode_enum_current].name" @click="textarea_click" @touchstart="textarea_touchstart" @touchmove="textarea_touchmove" @touchcancel="textarea_touchcancel" @touchend="textarea_touchend" @tap="textarea_tap" @longpress="textarea_longpress" @confirm="textarea_confirm" @input="textarea_input" @linechange="textarea_linechange" @blur="textarea_blur" @keyboardheightchange="textarea_keyboardheightchange" @focus="textarea_focus" style="padding: 20rpx;border: 1px solid #666;" />
</view>
<view class="main">
<textarea
class="uni-textarea"
:auto-focus="auto_focus_boolean"
:focus="focus_boolean"
:confirm-type="confirm_type_enum[confirm_type_enum_current].name"
:confirm-hold="confirm_hold_boolean"
:auto-height="auto_height_boolean"
:fixed="fixed_boolean"
:show-confirm-bar="show_confirm_bar_boolean"
:adjust-position="adjust_position_boolean"
:inputmode="inputmode_enum[inputmode_enum_current].name"
@click="textarea_click"
@touchstart="textarea_touchstart"
@touchmove="textarea_touchmove"
@touchcancel="textarea_touchcancel"
@touchend="textarea_touchend"
@tap="textarea_tap"
@longpress="textarea_longpress"
@confirm="textarea_confirm"
@input="textarea_input"
@linechange="textarea_linechange"
@blur="textarea_blur"
@keyboardheightchange="textarea_keyboardheightchange"
@focus="textarea_focus"
style="padding: 20rpx; border: 1px solid #666"
/>
</view>
<view class="content nvue">
<boolean-data :defaultValue="false" title="键盘弹起时，是否自动上推页面" @change="change_adjust_position_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否显示键盘上方带有”完成“按钮那一栏" @change="change_show_confirm_bar_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true" @change="change_fixed_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否自动增高，设置auto-height时，style.height不生效" @change="change_auto_height_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="点击键盘右下角按钮时是否保持键盘不收起" @change="change_confirm_hold_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="获取焦点" @change="change_focus_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="自动获取焦点" @change="change_auto_focus_boolean"></boolean-data>
<enum-data :items="confirm_type_enum" title="设置键盘右下角按钮的文字" @change="radio_change_confirm_type_enum"></enum-data>
<enum-data :items="inputmode_enum" title="是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。" @change="radio_change_inputmode_enum"></enum-data>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="content nvue">
<boolean-data
:defaultValue="false"
title="键盘弹起时，是否自动上推页面"
@change="change_adjust_position_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否显示键盘上方带有”完成“按钮那一栏"
@change="change_show_confirm_bar_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true"
@change="change_fixed_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否自动增高，设置auto-height时，style.height不生效"
@change="change_auto_height_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="点击键盘右下角按钮时是否保持键盘不收起"
@change="change_confirm_hold_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="获取焦点"
@change="change_focus_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="自动获取焦点"
@change="change_auto_focus_boolean"
></boolean-data>
<enum-data
:items="confirm_type_enum"
title="设置键盘右下角按钮的文字"
@change="radio_change_confirm_type_enum"
></enum-data>
<enum-data
:items="inputmode_enum"
title="是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。"
@change="radio_change_inputmode_enum"
></enum-data>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0,0,0,.06);
flex-direction: row;
justify-content: center;
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width:100%;
height:200rpx;
border: 1px solid #666;
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或