【Vue #3】指令补充&样式绑定

<a @click.stop.prevent="doSomething">同时阻止冒泡和默认行为</a>

<script setup>
import { ref } from 'vue'
const onPClick = () => {
  console.log('onPClick')
}
const onDivClick = () => {
  console.log('onDivClick')
}
</script>
<template>
  <div @click="onDivClick">
    <a href="https://www.baidu.com/">百度一下</a>
    <p></p>
    <!-- .prevent: 阻止默认行为 -->
    <a href="https://www.baidu.com/" @click.prevent>百度一下</a>
    <!-- .stop: 阻止冒泡, 同名事件不会向上传递 -->
    <p @click.stop="onPClick">I miss You</p>
    <!-- 修饰符的链式调用: 表名两个同时阻止 -->
    <a href="https://www.baidu.com/" @click.stop.prevent>百度一下</a>
  </div>
</template>

<input @keyup.enter="submit"> 回车键触发
<input @keyup.esc="close"> ESC 键触发
<input @keyup.delete="deleteItem"> 删除键触发

<input @keyup.ctrl.enter="ctrlEnter"> Ctrl + Enter
<div @click.ctrl.exact="ctrlOnlyClick">仅按 Ctrl 时点击触发</div>

<button @click.right="showContextMenu">右键触发菜单</button>

<script setup>
import { reactive } from 'vue'
const goods = reactive({
  name: '', price: ''
})
</script>
<template>
  <!-- .lazy -->
  名称: <input type="text" v-model.lazy="goods.name" /> <br /> <br />
  <!-- .trim -->
  名称: <input type="text" v-model.trim="goods.name" /> <br /> <br />
  <!-- .number -->
  价格: <input type="text" v-model.number="goods.price" /> <br /> <br />

</template>

<script setup>
const vColor = {
  mounted(el, binding) {
    // 1. 处理参数（用于背景色）
    if (binding.arg) {
      el.style.backgroundColor = binding.arg
    }

    // 2. 处理修饰符（可扩展多个样式）
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold'
    }
    if (binding.modifiers.italic) {
      el.style.fontStyle = 'italic'
    }
    if (binding.modifiers.underline) {
      el.style.textDecoration = 'underline'
    }

    // 3. 处理值（用于文字颜色）
    if (binding.value) {
      el.style.color = binding.value
    }

    // 4. 添加默认内边距提升显示效果
    el.style.padding = '0.5rem'
    el.style.borderRadius = '4px'
  }
}

// 注册局部指令
const directives = { vColor }
</script>

<template>
  <!-- 改进后的使用示例 -->
  <p v-color:skyblue.bold.italic="'#333'">天蓝背景、加粗斜体、深灰文字</p>
  <p v-color:#ffd700.underline="'#2c3e50'">金色背景、下划线、深蓝文字</p>
</template>

binding.modifiers = { 
  bold: true,
  italic: true 
}

<!-- 先阻止冒泡，再阻止默认行为 -->
<a @click.stop.prevent></a>

<!-- 先阻止默认行为，再判断是否自身触发 -->
<a @click.prevent.self></a>

<input @keyup.ctrl.exact="onlyCtrl"> 仅按 Ctrl 时触发

<script setup>
import { ref } from 'vue'
const intro = ref('') // 介绍
const city = ref('SH') // 城市
const blood = ref('ab') // 血型
const isAgree = ref(false) // 同意协议
const hobby = ref(['ZQ', 'PB']) // 爱好
</script>
<template>
  <!-- 1. 文本域 -->
  <textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea> <br /><br />
  <!-- 2. 下拉菜单 -->
  <select v-model="city">
    <option value="BJ">北京</option>
    <option value="CS">长沙</option>
    <option value="SH">上海</option>
  </select>
  <br /> <br />
  <!-- 3. 单选框: 多个当中只能选一个 -->
  <input type="radio" value="a" v-model="blood" />A
  <input type="radio" value="b" v-model="blood" />B
  <input type="radio" value="ab" v-model="blood" />AB
  <br /><br />
  <!-- 4. 复选框  -->
  <input type="checkbox" v-model="isAgree" />是否同意用户协议

  <br />
  <br />
  <input v-model="hobby" type="checkbox" value="LQ" />篮球
  <input v-model="hobby" type="checkbox" value="ZQ" />足球
  <input v-model="hobby" type="checkbox" value="PB" />跑步
</template>

:class = "三元表达式/对象"

<p class="box":class="{ 类名1:布尔值1，类名2:布尔值2 }"></p>

<div :class="[类名1, 类名2, {条件}]"></div>

<p :class="条件 ? '类名1' : '类名2'"></p>

<p class="item" :class="条件 ?'类名1':'类名2'"></p〉

<script setup>
import { ref } from 'vue'

const isActive = ref(true)
const errorClass = ref('text-danger')  // 新增数组绑定用的类名
const fontSize = ref(20)              // 内联样式用字体大小
</script>

<template>
  <!-- 1. 对象绑定 -->
  <p :class="{ active: isActive }">Active1</p>
  
  <!-- 2. 数组绑定 -->
  <p :class="['base-class', errorClass, { active: isActive }]">Active3</p>

  <!-- 3. 三元绑定 -->
  <p :class="isActive ? 'active' : ''">Active2</p>

  <!-- 4. 动静态 class -->
  <p class="base-class" :class="{ active: isActive }">Active4</p>

<style>
.active {
  color: red;
}
.text-danger {
  text-decoration: line-through;
}
.base-class {
  font-size: 20px;
}
</style>

:style="{属性名1: 表达式1, 属性名2: 表达式2, ...}"

<div style="color: red; font-size: 20px;"></div>

<template>
  <div :style="[baseStyles, overridingStyles]">1234</div>
</template>

<script>
// 可选：在 script 中定义样式对象
export default {
  data() {
    return {
      baseStyles: { color: 'blue' },
      overridingStyles: { fontSize: '30px' }
    }
  }
}
</script>

<script setup>
import { ref, reactive } from 'vue'

const isActive = ref(true)
const errorClass = ref('text-danger')  // 新增数组绑定用的类名
const fontSize = ref(20)              // 内联样式用字体大小

// 字体颜色
const colorStr = ref('red')

// 响应式样式对象
const styleObj = reactive({
  color: 'green',
  background: 'yellow'
})
</script>

<template>
  <!-- 1. 内联样式绑定 -->
  <div :style="{
    color: isActive ? 'red' : 'gray',
    fontSize: fontSize + 'px',
    'font-weight': 'bold'
  }">
    内联样式示例
  </div>
  <div>
    <p :style="{ color: colorStr }">Style1</p>
    <p :style="styleObj">Style2</p>
  </div>
  <!-- 3. 样式对象绑定（另一种写法） -->
  <div :style="styleObject">样式对象</div>
</template>

<script>
// 可选：在 script 中定义样式对象
export default {
  data() {
    return {
      styleObject: {
        backgroundColor: 'yellow',
        padding: '10px'
      }
    }
  }
}
</script>

<template>
  <div :class="$style.myClass">模块化样式</div>
</template>

<style module>
.myClass { color: red; }
</style>