<template> <view> <uni-forms ref="mineForm" :rules="mineRules" :modelValue="mineFormData"> <uni-forms-item label="生日" :required="true" name="birth"> <uni-datetime-picker type="date" return-type="date" v-model="mineFormData.birth" :clear-icon="false"></uni-datetime-picker> </uni-forms-item> </uni-forms> <button type="primary" size="mini" @click="save('mineForm')">保存</button> </view> </template> <script> export default { data() { return { mineFormData: { birth: '', }, mineRules: { birth: { rules: [ { required: true, errorMessage: '请选择你的出生日期' }, ], }, }, onReady() { this.$refs.mineForm.setRules(this.mineRules) }, methods: { save(ref) { this.$refs[ref].validate().then(res => { console.log('success', res); uni.showToast({ title: '保存成功' }) }).catch(err => { console.log('err', err); }) } } } </script>我想用这份代码在hbuilderx的vue.js环境下实现点击保存按钮后选择好的生日日期会永久保存在本地地址里
时间: 2024-04-17 19:27:08 浏览: 28
你可以使用uni-storage插件将生日日期保存在本地地址里。首先,安装uni-storage插件:
```bash
npm install uni-storage
```
然后在你的代码中导入并使用uni-storage:
```javascript
<template>
<view>
<uni-forms ref="mineForm" :rules="mineRules" :modelValue="mineFormData">
<uni-forms-item label="生日" :required="true" name="birth">
<uni-datetime-picker type="date" return-type="date" v-model="mineFormData.birth" :clear-icon="false"></uni-datetime-picker>
</uni-forms-item>
</uni-forms>
<button type="primary" size="mini" @click="save('mineForm')">保存</button>
</view>
</template>
<script>
import uniStorage from 'uni-storage';
export default {
data() {
return {
mineFormData: {
birth: '',
},
mineRules: {
birth: {
rules: [
{
required: true,
errorMessage: '请选择你的出生日期'
},
],
},
},
};
},
onReady() {
this.$refs.mineForm.setRules(this.mineRules);
// 从本地存储中获取保存的生日日期
const birth = uniStorage.getStorageSync('birth');
if (birth) {
this.mineFormData.birth = birth;
}
},
methods: {
save(ref) {
this.$refs[ref].validate().then(res => {
console.log('success', res);
// 将生日日期保存到本地存储
uniStorage.setStorageSync('birth', this.mineFormData.birth);
uni.showToast({
title: '保存成功'
});
}).catch(err => {
console.log('err', err);
});
}
}
};
</script>
```
这样,当用户选择好生日日期并点击保存按钮后,日期会被保存在本地存储中。下次用户打开页面时,会自动从本地存储中获取保存的生日日期并显示在选择器中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)