A Native Extension Plugin for Vuejs Based on The Html5plus Standard

vue-html5plus A native extension plugin for vuejs based on the html5plus standard!

vue-html5plus

A native extension plugin for vuejs based on the html5plus standard!

installation

CDN or direct references to download and use <script>the introduction of the label:

<script src="https://unpkg.com/[email protected]"></script>

Large projects can be installed using npm:

npm install vue-html5plus --save

transfer:

Vue.use(VueHtml5Plus);

getting Started

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
    <div id="app">
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">{{title}}</h1>
        </header>
        <div class="mui-content mui-content-padded">
            <p>定位城市：{{city}}</p>
            <p>网络信息：{{networkType}}</p>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/vue-html5plus.js"></script>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: '#app',
            data: {
                title: 'hello vue-html5plus!',
                city: '',
                networkType: ''
            },
            mounted: function () {
                console.log(JSON.stringify(Vue.os))
            },
            plusReady: function () {
                // 获取定位信息
                this.$geolocation.getCurrentPosition().then(function (position) {
                    this.city = position.address.city;
                });
                // 获取网络信息
                this.networkType = this.$networkinfo.getCurrentNetworkType();
            }
        })
    </script>
</body>
</html>

API

Option-plusReady and instance method-plusReady

The plusReady hook is added to the Vue life cycle in the vue-htmlplus plugin, but this hook cannot be used in components and routing.

new Vue({
    el: '#app',
    plusReady: function () {
        // ...
    }
})

You can use the $plusReady method in other life cycles of Vue, such as using 5+ API in mounted:

this.plusReady(function() {
    // ...
})

Instance attributes-os

An object used to determine the current operating environment.

{
    "plus":true,
    "stream":false,
    "wechat":false,
    "android":true,
    "iphone":false,
    "ipad":false,
    "version":"6.0",
    "isBadAndroid":false
}

Instance method-$nativeUI

toast (message, duration, align): display the prompt message that disappears automatically
alert (message, alertCB, title, buttonCapture): system prompt dialog box pops up
confirm (message, confirmCB, title, buttons) ：The system confirmation dialog box pops up
prompt (message, promptCB, title, tip, buttons): pop up the system input dialog box
actionSheet (actionsheetStyle, actionsheetCallback): pop up the system selection button box

Example method-$accelerometer (accelerometer)

Get the acceleration information of the current device:

this.$accelerometer.getCurrentPosition().then(function (acceleration) {
    // ...
});

Monitor device acceleration change information:

this.$accelerometer.watchAcceleration().then(function (acceleration) {
    // ...
});

Example method-$geolocation (device location information)

Get current device location information:

this.$geolocation.getCurrentPosition(option).then(function (position) {
    // ...
});

Monitoring equipment location change information:

this.$geolocation.watchPosition(option).then(function (position) {
    // ...
});

Turn off monitoring device location information:

this.$geolocation.clearWatch(watchId);

Example method-$networkinfo

Get network information:

this.$networkinfo.getCurrentNetworkType();

Download Details:

Author: vue-html5plus

Source Code: https://github.com/vue-html5plus/vue-html5plus

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.