收藏
回答

textarea动态设置它的样式 text-align 不生效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug textarea 客户端 7.0.3 2.6.0

- 当前 Bug 的表现(可附上截图)

在textarea 标签上的text-align样式是根据手动选择对齐方式设置的,选择了对齐方式,但是textarea标签上没有实时变化,而是上一次选择的对齐方式


- 预期表现

预期应是我选择了居左textarea里的的文本内容也居左,点击居中textarea文本内容居中

- 复现路径

点击居中,textarea文本还是居左,点击居左textarea文本居中了,以此类推,就是textarea的text-align的值永远是上一次点击的值

- 提供一个最简复现 Demo



<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 个回答

  • 小程序运营专员 - cunjin
    小程序运营专员 - cunjin
    2019-02-14

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

    2019-02-14
    有用
    回复 1
    • 赵红
      赵红
      2019-02-14

      开始设置为center是有效果的,是js动态控制组件textarea的text-align的居左、居中、居右就有问题(主要是在手机端有问题,在微信开发者工具里是没有问题的)

      2019-02-14
      回复
  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-02-12

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

    2019-02-12
    有用
    回复 2
登录 后发表内容