naive-ui/demo/debugComponents/suffixDebug/basic.demo.vue

<template>
  <div class="n-doc-section">
    <div class="n-doc-section__header">
      DateTime Range
    </div>
    <div
      class="n-doc-section__view"
      style="flex-wrap: wrap;"
    >
      <!--EXAMPLE_START-->
      <n-base-suffix
        clearable
        :show="show"
      />
      <n-base-suffix
        :show="show"
        disabled
        arrow
        :active="active"
      />
      <n-base-suffix
        :show="show"
        :active="active"
        arrow
        clearable
      />
      <n-base-suffix
        :active="!active"
        :show="show"
        arrow
      />
      <!--EXAMPLE_END-->
    </div>
    <pre class="n-doc-section__inspect">
      <n-button @click="toggleActive">toggleActive</n-button><n-button @click="toggleShow">toggleShow</n-button>
    </pre>
    <pre>
      <!--SOURCE-->
    </pre>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: false,
      show: true
    }
  },
  methods: {
    toggleActive () {
      this.active = !this.active
    },
    toggleShow () {
      this.show = !this.show
    }
  }
}
</script>