textarea动态设置它的样式 text-align 不生效
发布于 5 年前 作者 xiazheng 3736 次浏览 来自 问答
  • 当前 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 回复

开始就设置为center有效果么?

请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

回到顶部