Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(easyinput): 修复easyinput示例页面插槽名称不正确 #925

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(easyinput): 修复easyinput示例页面插槽名称不正确 #925

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 102 additions & 102 deletions pages/vue/easyinput/easyinput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,103 @@
<template>
<view>
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input
所有功能</text>
</uni-card>
<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
<uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></uni-easyinput>
</uni-section>
<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input">
</uni-easyinput>
</uni-section>
<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"
@input="input"></uni-easyinput>
</uni-section>
<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
<uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
<template #left></template>
</uni-easyinput>
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标" @iconClick="iconClick">
</uni-easyinput>
</uni-section>
<uni-section title="插槽" subTitle="使用 prefixIcon / suffixIcon 插槽 ,可以自定义输入框左右侧内容" type="line" padding>
<uni-easyinput v-model="value" placeholder="请输入网址">
<template #prefixIcon>
<view
style="background-color: #f2f2f2;padding: 0 10rpx;height: 70rpx;line-height: 70rpx;margin-right: 10rpx;">
https://</view>
</template>
</uni-easyinput>
<uni-easyinput class="uni-mt-5" prefixIcon="search" v-model="value" placeholder="想看什么,搜索一下">
<template #suffixIcon>
<button class="uni-btn uni-btn-mini uni-btn-radius" type="primary" size="mini">搜索</button>
</template>
</uni-easyinput>
</uni-section>
<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
<uni-easyinput disabled value="已禁用" placeholder="请输入内容"></uni-easyinput>
</uni-section>
<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
<uni-easyinput :clearable="false" type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
</uni-section>
<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>
<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
password: '',
placeholderStyle: "color:#2979FF;font-size:14px",
styles: {
color: '#2979FF',
borderColor: '#2979FF'
}
}
},
onLoad() {},
onReady() {},
methods: {
input(e) {
console.log('输入内容：', e);
},
iconClick(type) {
uni.showToast({
title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
.uni-mt-5 {
margin-top: 5px;
}
<template>
<view>
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input
所有功能</text>
</uni-card>
<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
<uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></uni-easyinput>
</uni-section>

<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input">
</uni-easyinput>
</uni-section>


<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"
@input="input"></uni-easyinput>
</uni-section>

<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
<uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
<template #left></template>
</uni-easyinput>
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标" @iconClick="iconClick">
</uni-easyinput>
</uni-section>


<uni-section title="插槽" subTitle="使用 left / right 插槽 ,可以自定义输入框左右侧内容" type="line" padding>
<uni-easyinput v-model="value" placeholder="请输入网址">
<template #left>
<view
style="background-color: #f2f2f2;padding: 0 10rpx;height: 70rpx;line-height: 70rpx;margin-right: 10rpx;">
https://</view>
</template>
</uni-easyinput>
<uni-easyinput class="uni-mt-5" prefixIcon="search" v-model="value" placeholder="想看什么,搜索一下">
<template #right>
<button class="uni-btn uni-btn-mini uni-btn-radius" type="primary" size="mini">搜索</button>
</template>
</uni-easyinput>
</uni-section>


<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
<uni-easyinput disabled value="已禁用" placeholder="请输入内容"></uni-easyinput>
</uni-section>

<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
<uni-easyinput :clearable="false" type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
</uni-section>

<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>


<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>


</view>
</template>

<script>
export default {
data() {
return {
value: '',
password: '',
placeholderStyle: "color:#2979FF;font-size:14px",
styles: {
color: '#2979FF',
borderColor: '#2979FF'
}
}

},
onLoad() {},
onReady() {},
methods: {
input(e) {
console.log('输入内容：', e);
},
iconClick(type) {
uni.showToast({
title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
icon: 'none'
})
}
}
}
</script>

<style lang="scss">
.uni-mt-5 {
margin-top: 5px;
}
</style>