https://github.com/panio123/vue-phone-model

一个vuejs的手机模型组件
https://github.com/panio123/vue-phone-model

vue vue-components vue-phone-model vue2

Last synced: 8 days ago
JSON representation

一个vuejs的手机模型组件

• Host: GitHub
• URL: https://github.com/panio123/vue-phone-model
• Owner: panio123
• Created: 2017-06-12T09:21:05.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-08T09:44:26.000Z (almost 7 years ago)
• Last Synced: 2024-10-31T15:44:17.329Z (19 days ago)
• Topics: vue, vue-components, vue-phone-model, vue2
• Language: Vue
• Homepage:
• Size: 1.66 MB
• Stars: 8
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-phone-model

>一个vuejs的手机模型组件

![image](http://git.oschina.net/liupan520/vue-phone-model/raw/master/phone.gif)

## 演示地址 [DOME](http://liu-pan.cc/production)

## 使用

#### 安装

``` bash

//需要vue.js 2.1.5 以上版本

npm install vue-phone-model

```

### 用于 *.vue 组件化开发模式中

``` html

  


    

  


  import VPhone from 'vue-phone-model';

  import 'vue-phone-model/dist/phone.css';

  import logo from './img/mi_logo.jpg';

  export default {

    name: 'app',

    components: {

      VPhone

    },

    data() {

      return {

        phoneType:'i6',//手机的大小，默认为iphone5的尺寸，可调为 i6 或 ipad，以后会支持自定义尺寸。

        phoneBackground:'red',//可自定义桌面背景，用法与定义元素的 background 属性一样。

        list: [{

          title: '坚果空间',

          icon: logo,//设置一个桌面图标，如果不传，刚默认取title字段的第一个字作为图标内容

          url: 'http://liu-pan.cc',//需要打开的链接 

          showToolBar: true,//是否显示工具栏，可传入 true false 'auto'默认为 'auto',组件会根据打开网页的 meta属性决定

          open: false//是否默认打开这个页面 -只会有一个默认打开生效

        }, {

          title: '小米商城',

          icon: logo,

          url: 'http://liu-pan.cc/example/mi_app/index.html',

          showToolBar: true,

          open: false

        }]

      }

    }

  }

```

### script 引入 

``` html

```

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).