pdf预览vue组件_Vue组件，用于生成链接预览

pdf预览vue组件

链接前 (link-prevue)

A flexible component for generate a link preview.

用于生成链接预览的灵活组件。

View demo 查看演示 Download Source 下载源

安装 (Intallation)

npm install link-prevue

基本用法 (Basic usage)

Javascript

Java脚本

import LinkPrevue from 'link-prevue'

new Vue({
  el: '#app',
  components: {
    LinkPrevue
  }
})

HTML

HTML

<div id="app">
  <link-prevue url="https://vuejs.org/"></link-prevue>
</div>

:+1:

：+1：

定制卡 (Custom card)

To use a custom card, set your own html code between the aperture tag and the close tag of component. Using the scoped slot.

要使用定制卡，请在组件的光圈标签和关闭标签之间设置自己的html代码。 使用作用域插槽。

<div id="app">
  <link-prevue url="https://vuejs.org/">
    <template slot-scope="props">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" :src="props.image" :alt="props.title">
        <div class="card-block">
          <h4 class="card-title">{{props.title}}</h4>
          <p class="card-text">{{props.description}}</p>
          <a v-bind:href="props.url" class="btn btn-primary">More</a>
        </div>
      </div>
    </template>
  </link-prevue>
</div>

自定义加载指示器 (Custom loading indicator)

To use a custom loading indicator, use the loading slot.

要使用自定义加载指示器，请使用加载插槽。

<div id="app">
  <link-prevue url="https://vuejs.org/">
    <template slot="loading">
      <!-- set your custom loading -->
      <h1>Loading...</h1>
    </template>
  </link-prevue>
</div>

自定义按钮处理程序 (Custom button handler)

For custom button handler use the onButtonClick property, like.

对于自定义按钮处理程序，请使用onButtonClick属性。

HTML

HTML

<div id="app">
  <link-prevue url="https://vuejs.org/" :onButtonClick="onClick"></link-prevue>
</div>

Javascript

Java脚本

import LinkPrevue from 'link-prevue'

export default {
  components:{
    LinkPrevue
  },
  methods: {
    onClick(prevue) {
      console.log('click', prevue.images, prevue.title, prevue.url, prevue.description)
    }
  }
}

翻译自: https://vuejsexamples.com/vue-component-for-generate-a-link-preview/

pdf预览vue组件