uniapp多行文本框 下划线样式

在uniapp中，要实现多行文本框下划线样式，可以通过以下步骤来实现：

1. 在vue文件中创建一个textarea组件，用于接收用户输入的多行文本。

<template>
  <div>
    <textarea class="text-area" v-model="textInput" rows="4"></textarea>
  </div>
</template>

2. 在样式文件中（通常是style标签或独立的样式文件），设置textarea的样式，并添加下划线样式。

.text-area {
  border: none;
  border-bottom: 1px solid #000;  /* 添加下划线样式 */
  width: 100%;
  resize: none;
}

3. 在对应的vue文件中，将上述样式文件引入，使样式生效。

<template>
  <div>
    <textarea class="text-area" v-model="textInput" rows="4"></textarea>
  </div>
</template>

<style>
@import './styles/text-area-style.css';
</style>

现在，你的uniapp多行文本框就具有了下划线样式。用户可以在文本框中输入多行文本，并且每一行都会带有下划线。

相关问题

微信小程序写以下代码;1.页面包含一个多行文本框，一个参数按钮。2.当多行文本框中无值且接受按钮无参数传回，则不显示任何。2.如果多行文本框中无参数但是接收按钮有参数，则在多行文本框中显示接收按钮的参数。3.如果多行文本框有参数则显示该参数

以下是微信小程序的代码实现，包含一个多行文本框和一个按钮：

<view class="container">
  <textarea class="input" bindinput="onInput">{{inputValue}}</textarea>
  <button class="btn" bindtap="onTap">{{btnValue}}</button>
</view>

在对应的JS文件中，我们需要定义多个变量来控制页面的显示：

Page({
  data: {
    inputValue: '', // 多行文本框中的值
    btnValue: '', // 按钮传递的参数
    displayInput: false // 是否显示多行文本框
  },

  // 监听多行文本框输入事件
  onInput: function(e) {
    // 更新多行文本框中的值
    this.setData({
      inputValue: e.detail.value,
      displayInput: true // 显示多行文本框
    });
  },

  // 监听按钮点击事件
  onTap: function() {
    // 如果多行文本框有值，则显示该值
    if (this.data.inputValue) {
      wx.showToast({
        title: this.data.inputValue,
        icon: 'none'
      });
    } else if (this.data.btnValue) { // 如果多行文本框没有值但是按钮有参数，则显示该参数
      wx.showToast({
        title: this.data.btnValue,
        icon: 'none'
      });
    } else { // 如果多行文本框和按钮都没有参数，则不显示任何信息
      this.setData({
        displayInput: false
      });
    }
  }
});

在CSS文件中，可以设置多行文本框和按钮的样式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.input {
  width: 80%;
  height: 150rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  font-size: 28rpx;
}

.btn {
  width: 200rpx;
  height: 80rpx;
  border-radius: 5rpx;
  background-color: #4caf50;
  color: #fff;
  font-size: 32rpx;
}

微信小程序写以下程序，主页面中包含一个多行文本框和一个页面跳转按钮，如果多行文本框为空，且页面跳转未传值过来则显示默认字体，如果多行文本框未输入值，但页面跳转按钮传值过来了则多行文本框显示页面传递过来的值，如果多行文本框有值且页面传值了则显示多行文本框中的值

好的，以下是微信小程序的代码实现：

主页面 wxml 文件：

<view class="container">
  <textarea value="{{textValue}}" bindinput="onInput"></textarea>
  <button class="btn" bindtap="navigateTo">页面跳转</button>
</view>

主页面 js 文件：

Page({
  data: {
    textValue: ''
  },
  onInput: function (event) {
    this.setData({
      textValue: event.detail.value
    })
  },
  navigateTo: function () {
    wx.navigateTo({
      url: '/pages/second/second?textValue=' + this.data.textValue
    })
  },
  onLoad: function (options) {
    if (options.textValue) {
      this.setData({
        textValue: options.textValue
      })
    } else if (!this.data.textValue) {
      this.setData({
        textValue: '默认字体'
      })
    }
  }
})

第二个页面 wxml 文件：

<view class="container">
  <text>{{textValue}}</text>
</view>

第二个页面 js 文件：

Page({
  data: {
    textValue: ''
  },
  onLoad: function (options) {
    if (options.textValue) {
      this.setData({
        textValue: options.textValue
      })
    } else {
      this.setData({
        textValue: '多行文本框为空'
      })
    }
  }
})

在主页面中，我们先绑定了一个多行文本框和一个按钮。当用户在多行文本框中输入时，我们通过 `bindinput` 事件来监听输入内容，并将输入的内容保存在 `textValue` 变量中。当用户点击页面跳转按钮时，我们使用 `wx.navigateTo` 来跳转到第二个页面，并将 `textValue` 的值传递过去。

在第二个页面中，我们通过 `onLoad` 事件来获取传递过来的值，并根据传递过来的值来设置 `textValue` 的值。如果页面跳转时没有传递 `textValue` 的值，则将 `textValue` 的值设置为“多行文本框为空”。

当用户在主页面中没有输入任何内容并且页面跳转也没有传递 `textValue` 的值时，我们将 `textValue` 的值设置为“默认字体”。

以上就是实现多行文本框显示不同内容的微信小程序的代码。