我可以使用vue-fontawesome作为复选框选中标记吗？

Question

我正在使用vue-fontawesome和font-awesome-icon.这适用于"独立"图标,如下所示:

<font-awesome-icon :icon="icon" size="1x" /> .

但是,如何<input type="checkbox">在vue组件方式中使用fontawesome checkmark ？

Answer 1

有一种方法可以查找css伪元素:

FontAwesomeConfig = { searchPseudoElements: true };

不建议使用此方法,因为它将检查现有标记,并通过CSS样式为伪元素添加内联SVG,这很慢.

我不鼓励这种方法所以我不会解释它是如何工作的,如果你有兴趣可以在这里阅读更多相关信息.

而不是使用伪元素,为这些复选框创建一个组件.

我们将创建一个名为的单个文件组件awesome-checkbox.

AwesomeCheckbox.vue

<template>
  <div :class="{'awesome-checkbox': true, [wrapperClassName]: !!wrapperClassName}"
       :style="{ color: isChecked ? checkedColor : uncheckedColor }">
    <input :id="id"
           :name="name"
           type="checkbox"
           class="awesome-checkbox__input"
           v-model="checkboxModel">
    <label :for="id"
           :style="{ cursor }"
           class="awesome-checkbox__label"
           @click="toggleCheck">
      <font-awesome-icon :icon="isChecked ? checkedIcon : uncheckedIcon"
                         :size="size" />
    </label>
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid';

/**
 * Custom HTML <input> checkbox element using Font-Awesome-Icon 5 icons for visual effect.
 */
export default {
  name: 'awesome-checkbox',

  components: { FontAwesomeIcon },

  props: {
    /**
     * A wrapper class other than default that provides extra manipulation from parent component.
     */
    wrapperClassName: {
      type: String,
      default: null,
    },
    /**
     * The name attribute for the checkbox input.
     */
    name: {
      type: String,
      default: null,
    },
    /**
     * The id attribute for the checkbox input.
     */
    id: {
      type: String,
      default: null,
      required: true,
    },
    /**
     * The model directive value to create two-way data binding.
     */
    model: {
      type: Boolean,
      default: null,
      required: true,
    },
    /**
     * The mouse cursor to display when the mouse pointer is over the Font-Awesome-Icon 5 element.
     * Accepts any cursor CSS property value.
     */
    cursor: {
      type: String,
      default: 'pointer',
    },
    /**
     * The Font-Awesome-Icon 5 imported icon object used for the unchecked state.
     */
    uncheckedIcon: {
      type: Object,
      default: () => faSquare,
    },
    /**
     * The Font-Awesome-Icon 5 imported icon object used for the checked state.
     */
    checkedIcon: {
      type: Object,
      default: () => faCheckSquare,
    },
    /**
     * The Font-Awesome-Icon 5 icon size.
     */
    size: {
      type: String,
      default: '1x',
    },
    /**
     * The Font-Awesome-Icon 5 icon color used for the unchecked state.
     */
    uncheckedColor: {
      type: String,
      default: 'inherit',
    },
    /**
     * The Font-Awesome-Icon 5 icon color used for the checked state.
     */
    checkedColor: {
      type: String,
      default: 'inherit',
    },
  },

  data() {
    return {
      isChecked: !!this.model,
      checkboxModel: this.model,
    };
  },

  methods: {
    emitModelValueUpdate() {
      /**
       * Update event.
       *
       * @event update
       * @type {boolean}
       */
      this.$emit('update:model', this.isChecked);
    },
    /**
     * Gets called when the user clicks on the label element.
     */
    toggleCheck() {
      this.isChecked = !this.isChecked;
      this.emitModelValueUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.awesome-checkbox {
  display: inline-flex;

  &__label {
    font-size: 1em; // Change Font-Awesome-Icon 5 icon size with css instead of predefined Font-Awesome-Icon 5 size prop.
  }

  &__input {
    display: none; // Hide the HTML <input> element.
  }
}
</style>

并在父组件中使用它,如下所示:

<template>
  <div>
    <awesome-checkbox :model.sync="acceptTerms"
                      checkedColor="#41B883"
                      uncheckedColor="#E0EAF1"
                      cursor="pointer"
                      size="1x"
                      id="my-awesome-checkbox"
                      name="acceptTerms"
                      :checkedIcon="faCheckSquare"
                      :uncheckedIcon="faSquare" />
  </div>
</template>

<script>
import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid';
import AwesomeCheckbox from '@/components/path/to/AwesomeCheckbox';

export default {
  name: 'parent-component',

  components: { AwesomeCheckbox },

  data() {
    return {
      acceptTerms: false,
      faSquare,
      faCheckSquare,
    };
  },
};
</script>

<style lang="scss" scoped>
/* ... */
</style>

您可以根据需要扩展此组件,例如使modelprop接受多种类型,如Array而不是boolean.

我刚刚为您的问题制作了这个组件,并没有完全测试,请仔细使用.