textarea动态设置它的样式 text-align 不生效
- 当前 Bug 的表现(可附上截图)
在textarea 标签上的text-align样式是根据手动选择对齐方式设置的,选择了对齐方式,但是textarea标签上没有实时变化,而是上一次选择的对齐方式
- 预期表现
预期应是我选择了居左textarea里的的文本内容也居左,点击居中textarea文本内容居中
- 复现路径
点击居中,textarea文本还是居左,点击居左textarea文本居中了,以此类推,就是textarea的text-align的值永远是上一次点击的值
- 提供一个最简复现 Demo
<template>
<div class="addtext-body" :style="{height: getHeight + 'px'}">
<p class="addtext-title">请输入文字信息在下面输入框:</p>
<textarea v-model="page.txt" class="addtext-area" maxlength="-1" auto-height placeholder="请在此添加文字"
:style="{background:'#'+backgroundColor[page.b],
'font-size':page.s+'px',
color:'#'+color[page.c],
'text-align':align[page.a],
'font-style':page.i==1?'italic':'normal',
'font-weight':page.w==1?'bold':'normal'}">
</textarea>
{{align[page.a]}}
<div class="addtext-tools">
<i class="iconfont icon-size" :class="{active:num==0}" [@click](/user/click)="showBox(size,0)"></i>
<i class="iconfont icon-color" :class="{active:num==1}" [@click](/user/click)="showBox(color,1)"></i>
<i class="iconfont icon-background" :class="{active:num==2}" [@click](/user/click)="showBox(background,2)"></i>
<i class="iconfont icon-align" :class="{active:num==3}" [@click](/user/click)="showBox(align,3)"></i>
<i class="iconfont icon-weight" :class="{selected:page.w==1}" [@click](/user/click)="changeWeight"></i>
<i class="iconfont icon-italic" :class="{selected:page.i==1}" [@click](/user/click)="changeitalic"></i>
<i class="iconfont icon-clear" [@click](/user/click)="clear" style="color:#00BB9C;"></i>
</div>
<div class="addtext-tips">
<div v-if="num!=9" class="tools-box"
:style="{background:bgColor,left:num==3?'50%':'0px',transform:num==3?'translate(-50%)':''}">
<div v-if="0==num" class="tools-size">
<span v-for="(item,index) in fontSize" :key="index" [@click](/user/click)="changeSize(item)">
<van-tag style="padding:0 7px;">{{item}}</van-tag>
</span>
</div>
<div v-if="1==num" class="tools-color">
<div v-for="(item,index) in color" :key="index" [@click](/user/click)="changeColor(index)">
<span :style="{background:'#'+item}"></span>
</div>
</div>
<div v-if="2==num" class="tools-color">
<div v-for="(item,index) in backgroundColor" :key="index" [@click](/user/click)="changeBackground(index)">
<span :style="{background:'#'+item}"></span>
</div>
</div>
<div v-if="3==num" class="tools-align">
<i class="iconfont icon-aleft" [@click](/user/click)="alignType(1)"></i>
<i class="iconfont icon-acenter" [@click](/user/click)="alignType(2)"></i>
<i class="iconfont icon-aright" [@click](/user/click)="alignType(3)"></i>
</div>
</div>
</div>
<button class="btn-add" type="button" style="margin-top:30px;" [@click](/user/click)="addText">插入文字</button>
</div>
</template>
<script>
export default {
name: "addtext",
data() {
return {
page: {
t: 't',
b: 0,
s: 14,
c: 0,
a: 1,
w: '',
i: '',
txt: ''
},
num: 9,
align: ['left','left', 'center', 'right'],
color: ['333', '11cd6e', '56abe4', '9d55b8', '33475f', 'f4c600', 'ea8010', 'eb4f38', 'ecf0f1', 'a9b7b7'],
backgroundColor: ['fff', '11cd6e', '56abe4', '9d55b8', '33475f', 'f4c600', 'ea8010', 'eb4f38', 'ecf0f1', 'a9b7b7'],
fontSize: [14, 16, 20, 24, 32],
showColor: true,
useLink: false,
isEdit: false
}
},
methods: {
showBox(type, index) {
if (this.num == index) {
this.num = 9;
return;
}
this.num = index;
},
changeSize(size) {
this.page.s = size;
},
changeColor(index) {
this.page.c = index
},
changeBackground(index) {
this.page.b = index
},
alignType(index) {
this.page.a = index
console.log(this.page.a);
},
changeWeight() {
this.num = 9
this.page.w = this.page.w == 1 ? '' : '1';
},
changeitalic() {
this.num = 9
this.page.i = this.page.i == 1 ? '' : 1;
},
addText() {
let that = this;
if (this.page.txt == '') {
this.$show.showToast('文字不能为空');
return;
}
if (this.isEdit) {
this.$commit.goodsPage.editPage(this.page)
} else {
this.$commit.goodsPage.setNewPage(this.page);
}
this.$router.back();
},
clear() {
this.page.t = 't',
this.page.b = 0;
this.page.s = 14;
this.page.c = 0,
this.page.a = 1,
this.page.w = '',
this.page.i = ''
}
},
computed: {
getHeight() {
return this.$api.getSystemInfo().windowHeight
},
bgColor() {
if (this.num == 2) {
return '#F0FFFF'
} else {
return '#fff'
}
},
/*getAlign(){
//return this.align[this.page.a-1]
console.log(this.page.a+'-'+this.align[this.page.a-1]);
return this.align[this.page.a-1]
}*/
},
onLoad() {
if (this.$mp.query.page) {
this.isEdit = true;
this.num = 9;
this.page = JSON.parse(this.$mp.query.page);
return;
}
Object.assign(this.$data, this.$options.data());
}
}
</script>
2 回复
请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。