vue-instagram, 在 Vue.js 上,基于 Instagram 提取组件

分享于 

3分钟阅读

GitHub

  繁體 雙語
Fetch Instagram feeds component based on Vue
  • 源代码名称:vue-instagram
  • 源代码网址:http://www.github.com/kevinongko/vue-instagram
  • vue-instagram源代码文档
  • vue-instagram源代码下载
  • Git URL:
    git://www.github.com/kevinongko/vue-instagram.git
    Git Clone代码到本地:
    git clone http://www.github.com/kevinongko/vue-instagram
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kevinongko/vue-instagram
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    instagram

    npmnpmnpmnpm

    基于 的Instagram 提取组件的提要。

    工作与 Vue 2. *

    演示

    我的Instagram

    安装

    通过CDN安装

    
    
    
    
    <script src="https://unpkg.com/vue"></script>
    
    
    <script src="https://unpkg.com/vue-instagram"></script>
    
    
    
    <script>
    
    
     Vue.use(VueInstagram.default)
    
    
    </script>
    
    
    
    

    通过NPM安装

    
    
    
    
    $ npm install vue-instagram --save
    
    
    
    
    register-作为组件
    
    
    
    
    import Vue from 'vue'
    
    
    import VueInstagram from 'vue-instagram'
    
    
    
    export default {
    
    
     name: 'App',
    
    
    
     components: {
    
    
     VueInstagram
    
    
     }
    
    
    }
    
    
    
    
    register-作为插件
    
    
    
    
    import Vue from 'vue'
    
    
    import VueInstagram from 'vue-instagram'
    
    
    
    Vue.use(VueInstagram)
    
    
    
    

    用法

    使用作用域 slot 设置你的提要样式。

    
    
    
    
    <template>
    
    
     <vue-instagram token="accessTokenHere" username="kevinongko" :count="5" :tags="['hashtag1', 'hashtag2']" mediaType="image">
    
    
     <template slot="feeds" slot-scope="props">
    
    
     <li class="fancy-list"> {{ props.feed.link }} </li>
    
    
     </template>
    
    
     <template slot="error" slot-scope="props">
    
    
     <div class="fancy-alert"> {{ props.error.error_message }} </div>
    
    
     </template>
    
    
     </vue-instagram>
    
    
    </template>
    
    
    
    <script>
    
    
    import VueInstagram from 'vue-instagram'
    
    
    
    
    
    export default {
    
    
     name: 'App',
    
    
    
    
    
     components: {
    
    
     VueInstagram
    
    
     }
    
    
    }
    
    
    </script>
    
    
    
    
    

    道具

    需要道具描述类型
    令牌Instagram 令牌的访问字符串true
    用户名( 令牌) Instagram 所有者的用户名字符串true
    计数数要获取的提要数号码true
    标签用hastag过滤轮廓Arrayfalse
    mediaType按介质类型过滤概要文件: 图像或者视频字符串false

    许可证

    vue是开放源码的软件,许可在 MIT许可

    支持

    你好,如果你在我的空闲时间,这个项目的维护者,请考虑在任何方式帮助我,请考虑支持我。 谢谢


    COM  BASE  component  FEED  Instagram  Fetch  
    相关文章