vue2实现点击一个按钮弹出一个文本框，在文本框内设置一个按钮关闭文本框

你可以使用Vue2的条件渲染来实现这个功能。首先，在你的Vue组件中添加一个变量来控制文本框的显示：

<template>
  <div>
    <button @click="showTextBox = true">点击弹出文本框</button>
    <div v-if="showTextBox">
      <input type="text">
      <button @click="showTextBox = false">关闭文本框</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTextBox: false
    };
  }
};
</script>

在上面的代码中，我们添加了一个 `showTextBox` 变量，用于控制文本框的显示和隐藏。当点击按钮时，将 `showTextBox` 的值设置为 `true`，文本框就会显示出来。而当点击文本框内的关闭按钮时，将 `showTextBox` 的值设置为 `false`，文本框就会隐藏起来。

希望能对你有帮助。

相关问题

使用vue创建一个新的页面，其中包含“文本框”和“按钮”

以下是使用Vue创建一个包含文本框和按钮的新页面的示例代码：

<template>
  <div>
    <input type="text" v-if="inputVisible" ref="iptRef">
    <button @click="showInput">Show Input</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVisible: false
    }
  },
  methods: {
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.iptRef.focus()
      })
    }
  }
}
</script>

在这个示例中，我们使用了Vue的单文件组件格式，包含了一个模板和一个脚本。模板中包含了一个文本框和一个按钮，文本框的显示与否由`inputVisible`变量控制。当按钮被点击时，`showInput`方法会被调用，将`inputVisible`变量设置为`true`，从而显示文本框，并使用`$nextTick`方法确保文本框已经被渲染出来后，将焦点设置到文本框中。

vue在弹窗中选择商品后在另一个文本框显示供应商并锁定文本框

你可以在弹窗中的商品选择事件中获取供应商信息，然后将供应商信息填充到另一个文本框中，并设置该文本框为只读或禁用状态，从而达到锁定的效果。具体可以按照如下示例代码实现：

<template>
  <div>
    <button @click="showDialog">选择商品</button>
    <input type="text" v-model="selectedProduct" readonly>
    <input type="text" v-model="selectedSupplier" readonly disabled>
    <dialog :open="dialogVisible">
      <select v-model="selectedProductId" @change="onProductSelect">
        <option value="">请选择商品</option>
        <option v-for="product in products" :value="product.id">{{ product.name }}</option>
      </select>
      <button @click="closeDialog">确定</button>
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      products: [
        { id: 1, name: '商品A', supplier: '供应商A' },
        { id: 2, name: '商品B', supplier: '供应商B' },
        { id: 3, name: '商品C', supplier: '供应商A' },
      ],
      selectedProductId: '',
      selectedProduct: '',
      selectedSupplier: '',
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    onProductSelect() {
      const selectedProduct = this.products.find(p => p.id === Number(this.selectedProductId));
      if (selectedProduct) {
        this.selectedProduct = selectedProduct.name;
        this.selectedSupplier = selectedProduct.supplier;
      } else {
        this.selectedProduct = '';
        this.selectedSupplier = '';
      }
    },
  },
};
</script>

在上述代码中，我们首先在模板中添加了一个按钮，点击后会显示一个弹窗，用于选择商品。在弹窗中，我们使用了一个下拉框来显示可选的商品列表，当用户选择了一个商品时，会触发 `onProductSelect` 方法，该方法会从选中的商品中获取供应商信息，并更新到另一个文本框中。同时，为了达到锁定的效果，我们将该文本框设置为只读和禁用状态，从而防止用户手动修改其内容。